Question

在下面的测试用例中，alt文本是水平居中的，但它粘在盒子的顶部。我如何在中间得到它？

<html>
  <body>
    <div style="height: 300px; width: 300px; border: solid black 1px;">
      <img src="asdfasdf" alt="foo" style="display: block; text-align: center; vertical-align: middle"/>
    </div>
  </body>
</html>

Answer 1

表的一个优点是它们提供跨浏览器的垂直居中。 DIV没有。这曾经是一个案例，我会咬紧牙关，加上那些丑陋的TR和TD。

<table cellspacing="0" style="width:300px;height:300px;border:1px solid black;">
   <tr>
     <td style="vertical-align:middle;text-align:center;">
       <img src="asdfasdf" alt="foo" />
     </td>
   </tr>
</table>

它被称为单细胞中心表而且很丑陋，它可以工作。

Answer 2

尝试在alt属性的开头使用一些空格。这是唯一似乎对我有用的东西。

Answer 3

尝试使用display:table-cell代替block。

如何获得alt文本以支持vertical-align：middle？

3 个答案: