html - Css 与两个 float 元素对齐到中心 td

标签 html css

我有一个表格,我需要所有内容都居中对齐,并且在一个 td 中我有一个图像,图像后有跨度。 我需要 tr td 中的所有图像都垂直对齐,所以我对它们应用 float left 但我松开了对齐中心。有什么解决方案?

 <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;
}

笨蛋: http://plnkr.co/edit/D4VbnesF3FnwnNHI25nB?p=preview

我需要图像与所有其他图像对齐,还有跨度。

最佳答案

如果你想让它水平和垂直居中,你必须删除 float 并放置一个 vertical-align:middle

像这样:

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

当然你也可以使用类...

关于html - Css 与两个 float 元素对齐到中心 td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27901213/

相关文章:

php - 我希望我的链接居中并且按钮仍然有效

javascript - html 图像标题仅适用于两侧的鼠标

css - 在 jQuery Mobile 中更改 ListView 元素背景颜色

html - 在带有 vueJS 的 html 文件中使用预呈现的 html 作为变量

javascript - 如何使用 Angular JS 在 html 下拉列表中显示 json 响应

javascript - HTML 中 style.width 和 offsetwidth 的区别?

JQuery 添加类。通过搜索具有相同类的所有元素

javascript - 文本链接填写表单字段

css - 如何将 “line break” 添加到 Flexbox,而不导致双倍大小的间隙?

HTML 网格系统 - 移动 View 中的 div 顺序