Question

我有桌子，我需要所有内容对齐中心，并在一个td我有图像后的跨度图像。我需要tr td中的所有图像垂直对齐，所以我将浮动向左应用，但我松开了对齐中心。这个解决方案是什么？

 <body>
   <table class="table table-striped">
     <tr>
       <td>
       <img src="http://placehold.it/50x20" alt="">
       <span>short text</span>   
       </td>
       <td>some text</td>
       <td>some text</td>
       <td>some text</td>
     </tr>
      <tr>
         <td>
       <img src="http://placehold.it/50x20" alt="">
       <span>longer text text</span>   
       </td>
       <td>some text</td>
       <td>some text</td>
       <td>some text</td>
     </tr>
   </table>
  </body>

.table tr td {
  text-align: center;
}
.table tr td:first-child span, .table tr td:first-child img  {
 float:left;
}

.table tr td:first-child img   {
  margin-right: 5px;
}

plunker： http://plnkr.co/edit/D4VbnesF3FnwnNHI25nB?p=preview

我需要将图像与所有其他图像对齐，也就是跨度。

Answer 1

这就是你想要的吗

CSS

.table{ width: 100%;
        position:relative;
}

.table tr td {
  text-align: center;
    position:relative;
}
.table tr td:first-child img  {
    vertical-align: middle;
}

.table tr td:first-child:before {
    position: absolute;
    display: inline-block;
    left: 0px;
    top:50%;
    background: url(http://placehold.it/50x20) no-repeat 0;  
    width: 50px;
    height: 50px;
    margin-top: -25px;
    content:"";
}



 <img src="http://placehold.it/50x20" alt="">

.table tr td:first-child span {
text-align: center;
}

.table tr td:first-child img   {
  margin-right: 5px;
}

<强> DEMO HERE

Answer 2

如果你想让它在水平和垂直方向都居中，你必须删除 float 一个put-vertical：middle

像这样：

<td style="text-align:center;vertical-align:middle;">
    <img src="" style="display:inline-block;" />
</td>

当然你也可以用类...

来做到这一点

Css使用两个浮动元素对齐到中心td

2 个答案: