英文:
Center text under image inside a container with flexbox
问题
我正在尝试使用 flexbox 使文本与图像一起居中。文本对齐正常，但相应的图像没有居中。
CSS：
body { font-family:'Times New Roman', Times, serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
.infoheader { font-size: 36px;
font-weight: 300;
margin-bottom: 12px;
text-align: center; }
.body { display: flex;
gap: 10px;
text-align: center;
justify-content: center; }
.card { max-width: 200px; }
.fishes { height: 100px;
width: 100px; }
HTML：
<body>
<div class="infoheader">一组鱼的示例：</div>
<div class="body">
<div class="card">
<img class="fishes" src="./fishes/onefish.jpg" alt="有趣的鱼">
<div class="text">如果我添加一行非常非常非常长的文本会发生什么</div>
</div>
<div class="card">
<img class="fishes" src="./fishes/bluefish.jpg" alt="有趣的鱼">
<div class="text">这是图像下的一些子文本。</div>
</div>
<div class="card">
<img class="fishes" src="./fishes/fish.jpg" alt="海豹">
<div class="text">这是图像下的一些子文本。</div>
</div>
<div class="card">
<img class="fishes" src="./fishes/twofish.jpg" alt="有趣的鱼">
<div class="text">这是图像下的一些子文本。</div>
</div>
</div>
</body>
通过将以下内容添加到 .body：
justify-content: center;
text-align: center;
我以为图像和文本会彼此居中，但只有文本居中，而图像似乎向左略微偏移。
英文:
I am trying to get text be centered along with an image, using flexbox. The text is aligned properly, but not the corresponding images.
CSS:
body { font-family:'Times New Roman', Times, serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
.infoheader { font-size: 36px;
font-weight: 300;
margin-bottom: 12px;
text-align: center; }
.body { display: flex;
gap: 10px;
text-align: center;
justify-content: center; }
.card { max-width: 200px; }
.fishes { height: 100px;
width: 100px; }
HTML:
<body>
<div class="infoheader">An Example Assortment of Fishes:</div>
<div class="body">
<div class="card">
<img class="fishes" src="./fishes/onefish.jpg" alt="funny fish">
<div class="text">what would happen if i added a very very very long line of text</div>
</div>
<div class="card">
<img class="fishes" src="./fishes/bluefish.jpg" alt="funny fish">
<div class="text">This is some subtext under an image.</div>
</div>
<div class="card">
<img class="fishes" src="./fishes/fish.jpg" alt="SEAL">
<div class="text">This is some subtext under an image.</div>
</div>
<div class="card">
<img class="fishes" src="./fishes/twofish.jpg" alt="funny fish">
<div class="text">This is some subtext under an image.</div>
</div>
</div>
</body>
By adding
justify-content: center;
text-align: center
to .body, I thought that the image and text would be centered with each other, but only the text is centered and the images look like they are displaying slightly to the left of the text.
答案1
得分: 0
尝试将.card类修改如下：
.card {
max-width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
英文:
Try to modify the .card class as follows:
.card {
max-width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论