<div>中文本的垂直对齐方式

Question

我正在制作网页并学习如何使用样式表。

我有3个并排的“div”框，每个框都在图像下方有图像和文字。

HTML和CSS：

.prod_img_box {
  vertical-align: middle;
  text-align: center;
  width: 300px;
  border: 2px solid #black;
  margin: 0 auto;
  display: inline-block;
  position: relative;
}

<div class="prod_img_box">
  <img src="direct.png" alt="Storage Vessels" class="prod_img" border=2/>
  <h3 class="white_font">Storage Vessels</h3>
</div>
<div class="prod_img_box">
  <img src="tran_imm.png" alt="Immersion Heaters" class="prod_img" border=2/>
  <h3 class="white_font">Immersion Heaters</h3>
</div>
<div class="prod_img_box">
  <img src="at_chrome.png" alt="Towel Rail Heating Elements" class="prod_img " border=2/>
  <h3 class="white_font">Towel Rail Heaters</h3>
</div>

这给了我以下内容：

几乎我想要的东西 - 但是每张图片下方的文字目前都是垂直居中的（因为它应该在“prod_img_box”内部 - 但我希望文字全部在底部有一条水平线。

我不确定这样做的最好方法。应该是这样的：

<div class="image">IMAGE</div>
<div class="text">Storage Vessels</div>
<div class="image">IMAGE</div>
<div class="text">Immersion Heaters</div>
<div class="image">IMAGE</div>
<div class="text">Towel Rail Elements</div>

网页也可以是found here。

Answer 1

我认为你应该使用

<div class="image">IMAGE</div>
<div class="text">Storage Vessels</div>

然后设置图像类的高度以设置文本始终保持在底部

Answer 2

此课程中的

检查边框应该是2px solid black;或2px solid #000;

.prod_img_box {
  vertical-align: middle;
  text-align: center;
  width: 300px;
  border: 2px solid black;
  margin: 0 auto;
  display: inline-block;
  position: relative;
}

如果不需要，请从每个图片代码中删除 border = 2

注意：如果您使用 #tag ，则需要按颜色代码设置颜色，即#000，或者如果您使用的是直接颜色名称，那么您不需要输入 #tag

Answer 3

You can set a default height to the div so that however the image is , it will display all the divs to be same and thus same level of texts.

Answer 4

Div元素最常用于将一组内容保持在一起。如果您希望将代码保持在一起，移动文本的最佳方法就是操纵padding文件中的margin和CSS属性。