将中心对齐表格单元格中的图像？

我有这样的HTML：将中心对齐表格单元格中的图像？

<td> 
    <ol start="4"> 
     <li> 
      <div style="float:left;">some text</div> 
      <div style="float:right;"> 
       <img style="vertical-align:middle;" src="pic.png" /> 
      </div> 
      <div style="clear:both;"></div> 
     </li> 
    </ol> 
</td>

我尝试很多东西，包括垂直对齐：中间要么对齐文本到图像的中间或反过来，没有任何改变的结果。到目前为止，图像的顶部与文本的顶部对齐。

怎么了？

谢谢！

来源

2012-10-01 user1638055

把你的 “一些文本” 分区的PIC DIV中，将其设置为display:inline所以它不会断线，只是添加vertical-align:middle，像这样：

<table><tr> 
<td> 
    <ol start="4"> 
     <li> 

      <div style="float:right;"> 
       <div style="display:inline;vertical-align:middle;">some text</div> 
       <img style="vertical-align:middle;" src="pic.png" /> 
      </div> 
      <div style="clear:both;"></div> 
     </li> 
    </ol> 
</td> 
</tr></table>

工作fiddle

UPDATE ：
为了能够做到vertical-align:middle在几行被<br>打破，因为OP在注释中指出，将“some text”div的显示更改为inline-table而不仅仅是inline，看到工作jsFiddle

来源

2012-10-01 11:18:04 Nelson

这走向了正确的方向，但现在4.从列表中仍然是在旧的位置。它也需要降低一点。 – user1638055

您正在评论的问题我没有在您粘贴的代码中看到，请尝试制作您正在描述的问题的http://jsfiddle.net测试用例，以便我们能够为您提供更多帮助。 – Nelson

你是对的，请点击这里：http://jsfiddle.net/a4fGa/。文本需要留在图像左侧。忘记我在第一条评论中所说的话。 – user1638055

将中心对齐表格单元格中的图像？

回答

相关问题