Html div不对齐

我有3个简单的div，其中一些外观样式应该排成一行，其中两个有图像，分别位于左侧和右侧，而中间一个包含另一个div，其中包含文本

我可以将图像放入div中，但中间包含文本的图像没有与其他两个图像水平对齐

下面是html

 <div class="eggpic">
    <img src="smiley.gif"/>
 </div>
 <div class="timersection">
   <div class="timersectiontext">Hello</div>
 </div>
 <div class="buttonpic softboil">
   <img src="smiley.gif"/>
  </div>

你好

这里是jsfiddle链接或其他链接

请帮我查一下所有的分区

---

提前感谢。

是否使用display:inline block；显示div？如果是这样，您可以尝试将其添加到所有三个div中：

垂直对齐：中间对齐

否则，用另一个div包装所有三个div，并将父div显示为表

显示：表格

然后将所有三个子div显示为表格单元格并对齐：

显示：表格单元格；

---

垂直对齐：中间对齐

使用float:left而不是display:inline块，并给父div一些高度。

应该是什么样子？@felipsmartins如果你看到jsfiddle，那么中间div和右/左div的高度不相等，我希望中间div的高度等于边div的高度当你使用百分比高度时，需要设置父容器的高度，并确保将内联块垂直对齐，否则，您可以使用表格布局进行设置。谢谢，它可以正常工作。但是内联块的问题是什么？我不明白。通过使用内联块，您将div视为一行中的字符或单词，单词从基线开始。考虑将字符“a”和“b”写在一行上，它们都从下面相同的基线开始，但在不同的高度结束。与你的三个分区情况相同，第二个分区的高度较低，但所有三个分区都从下面相同的基础位置开始。我希望解释清楚。