网页图片不显示、文本垂直居中等前端开发问题求助

算力阿峰

2026-7-12

POHP赞助者卡片网页问题修复方案

问题1：图片无法显示

原因：图片路径使用了绝对路径（开头的/），会从网站根目录查找资源，而你的images文件夹与index.html同级，需用相对路径。
修复：移除图片src开头的/，例如将/images/Arya_Llama.png改为images/Arya_Llama.png，所有图片路径统一调整。

问题2：文本无法垂直居中

原因：.text容器的height属性缺失单位（105.1应为105.1px），且仅配置了水平居中，未设置垂直对齐规则。
修复：修改.text的CSS规则：

.text {
  width: 163.563px;
  height: 105.1px; /* 补全px单位 */
  background-color: #d7c3ff;
  color: #5a2875;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

问题3：第10、12个grid容器无法水平垂直居中

原因：

元素存在重复ID（如<div id="text2" id="centered">），HTML规则禁止一个元素绑定多个ID；
容器未设置居中对齐规则，#image2的justify-content设为left导致图片左对齐。
修复：

移除重复ID，调整第10个容器代码：

<div class="sponsee">
  <div id="text2">
    <h3>PIECE OF HEAVEN PROJECT</h3>
    <h3>www.pohpsanctuary.com</h3>
  </div>
</div>

调整第12个容器代码：

<div class="sponsee">
  <div id="image2">
    <img src="images/POHP - Logo.png" alt="Piece of Heaven Project Logo">
  </div>
</div>

修改对应CSS规则：

.sponsee {
  width: 268.663px;
  height: 105.1px;
  border: 0.8px solid #5a2875;
  background-color: #d7c3ff;
  display: flex;
  align-items: center; /* 垂直居中子元素 */
}

#text2 {
  width: 268.663px;
  height: 105.1px;
  background-color: #5a2875;
  color: #d7c3ff;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中文本 */
  text-align: center; /* 水平居中 */
}

#image2 {
  width: 268.663px;
  height: 105.1px;
  background-color: grey;
  display: flex;
  justify-content: center; /* 水平居中图片 */
  align-items: center; /* 垂直居中图片 */
  overflow: hidden;
}

问题4：自定义字体引入失败

原因：字体路径可能错误，且@font-face缺少必要的字体属性声明。
修复：

确保字体文件路径正确（假设support文件夹与styles.css同级），完善@font-face规则：

@font-face {
  font-family: "Bakerie Smooth Wide";
  src: url("./support/font/BakerieSmoothWide-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

在全局或目标元素上应用字体：

body {
  /* 保留原有属性 */
  font-family: "Bakerie Smooth Wide", sans-serif;
}

修复后的完整代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" type="text/css">
    <title>POHP - Sponsee Rack Card</title>        
</head>
<body>
    <div class="sponsees">
        <div class="sponsee">
            <div class="image">
                <img src="images/Arya_Llama.png" alt="Arya Llama Image">
            </div>
            <div class="text">
                <h2>Arya</h2>
                <p>This ‘guard llama’ absolutely loves being in water, and adores celery.</p>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Button_Sheep.png" alt="Button Sheep Image">
            </div>
            <div class="text">
                <h2>Button</h2>
                <p>Our friendliest sheep that loves to be cuddled and hugged.</p>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Caspian_Rooster.jpg" alt="Caspian Rooster Image">
            </div>
            <div class="text">
                <h2>Caspian</h2>
                <p>If this very handsome rooster thinks you’re up to no good, watch out!</p>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Cedric_Goat.jpg" alt="Cedric Goat Image">
            </div>
            <div class="text">
                <h2>Cedric</h2>
                <p>This most affectionate of goats will come say hello and inspect anything new.</p>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Clementine_Horse.png" alt="Clementine Horse Image">
            </div>
            <div class="text">
                <h2>Clementine</h2>
                <p>Often found in the barn sampling hay bales and always willing to take a treat.</p>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Darius_Goose.jpg" alt="Darius Goose Image">
            </div>
            <div class="text">
                <h2>Darius</h2>
                <p>A proud parent who passionately cares for, and protects, his goslings.</p>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Eddy_Pig.png" alt="Eddy Pig Image">
            </div>
            <div class="text">
                <h2>Eddy</h2>
                <p>A friendly, inquisitive Kunekune always ready to join you for a snack and tummy rub.</p>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Pixie_Alpaca.jpg" alt="Pixie Alpaca Image">
            </div>
            <div class="text">
                <h2>Pixie</h2>
                <p>Has interesting teeth and will let everyone know about nearby dogs, loudly!</p>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Raja_Peacock.png" alt="Rajah Peacock Image">
            </div>
            <div class="text">
                <h2>Rajah</h2>
                <p>A stunning peacock who enjoys opera, and if Romeo and Juliet is playing he is close.</p>
            </div>
        </div>
        <div class="sponsee">
            <div id="text2">
                <h3>PIECE OF HEAVEN PROJECT</h3>
                <h3>www.pohpsanctuary.com</h3>
            </div>
        </div>
        <div class="sponsee">
            <div class="image">
                <img src="images/Ruby_Cow.png" alt="Ruby Cow Image">
            </div>
            <div class="text">
                <h2>Ruby</h2>
                <p>A large, gentle, archetypal Highland that adores having bread rolls for a treat.</p>
            </div>
        </div>
        <div class="sponsee">
            <div id="image2">
                <img src="images/POHP - Logo.png" alt="Piece of Heaven Project Logo">
            </div>
        </div>
    </div>
</body>
</html>

CSS代码

/*
Much Gratitude Eric!
http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
*{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 自定义字体引入 */
@font-face {
  font-family: "Bakerie Smooth Wide";
  src: url("./support/font/BakerieSmoothWide-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

html {
  max-width: 816px;
  max-height: 432px;
  background-color: #d7c3ff;
}

body {
  width: 812.4px;
  height: 428.4px;
  margin: 1px;
  border: 0.8px solid #5a2875;
  background-color: #d7c3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bakerie Smooth Wide", sans-serif;
}

h2 {
  font-size: 32px;
  font-weight: 800;
}

h3 {
  font-size: 24px;
  font-weight: 800;
  font-stretch: narrower;
}

p {
  font-size: 16px;
  font-weight: 200;
}

.sponsees {
  width: 810.8px;
  height: 426.8px;
  border: 0.8px solid #5a2875;
  background-color: #d7c3ff;
  display: grid;
  grid-template-columns: auto auto auto;
}

.sponsee {
  width: 268.663px;
  height: 105.1px;
  border: 0.8px solid #5a2875;
  background-color: #d7c3ff;
  display: flex;
  align-items: center;
}

.image {
  width: 105.1px;
  height: 105.1px;
  background-color: grey;
  display: flex;
  justify-content: left;
  align-items: center;
  overflow: hidden;
}
.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text {
  width: 163.563px;
  height: 105.1px;
  background-color: #d7c3ff;
  color: #5a2875;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#text2 {
  width: 268.663px;
  height: 105.1px;
  background-color: #5a2875;
  color: #d7c3ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#image2 {
  width: 268.663px;
  height: 105.1px;
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#image2 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

内容的提问来源于stack exchange，提问作者John Taylor

网页图片不显示、文本垂直居中等前端开发问题求助

问题1：图片无法显示 #

问题2：文本无法垂直居中 #

问题3：第10、12个grid容器无法水平垂直居中 #

问题4：自定义字体引入失败 #

修复后的完整代码 #