如何在表格 td 中居中图像？答案

【问题标题】：How to center an image in a table td?如何在表格 td 中居中图像？
【发布时间】：2013-09-14 03:27:49
【问题描述】：

我想在表格列 (td) 中居中（中心+中间）图像和 h2 内的标题

CSS

.centered
{
    text-align:center;
}

HTML

<table class="table table-bordered">
<tbody>

<tr>
    <td class="centered"><%= image_tag(prank.image_url, :size => "50x50") %></td>
    <td class="centered"><h2><%=prank.category.titleize%></h2></td>
</tr>

我正在使用 Twitter 引导程序

【问题讨论】：

text-align:center 可能会起作用。
如果你还没有得到答案，那么请你分享这个错误的实时链接....

标签： html twitter-bootstrap

【解决方案1】：

你可以试试：

.centered { vertical-align:middle; text-align:center; }
.centered img { display:block; margin:0 auto; }

【讨论】：

这对我有用！谢谢！整行：

【解决方案2】：

试试

.centered{width: 50px; margin: 0px, auto, 0px, auto;}

【讨论】：

【解决方案3】：

看看http://jsfiddle.net/k6Nvk/1/

只需添加您的<td> >> <td align="center" valign="middle"><image path></td>

您也可以使用 css check DEMO 来做到这一点

【讨论】：

【解决方案4】：

您所要做的就是从左右声明边距（顶部和底部可选）：

.center {
margin-left: 25%;
margin-right: 25%;
}

或者你可以使用

.center
{
margin-left: auto;
margin-right: auto;
width: 20%;
}

如果你不需要，就不要使用<table> 标签。请改用<div>。

【讨论】：

【解决方案5】：

这就是我的做法。我调用了基本的 twitter css 文件。比我调用我的默认 css 文件之后在我的默认文件中，我有这个类

.table-center th, .table-center td {
    border-top: 1px solid #DDDDDD;
    line-height: 18px;
    padding: 8px;
    text-align: center;
    vertical-align: top;
}

然后在我的桌子上我这样做：

<table class="table table-center ....">...</table>

【讨论】：

【解决方案6】：

注意align="center" 在 HTML 5 中不受支持；见http://www.w3schools.com/tags/tag_td.asp

【讨论】：

【解决方案7】：

这应该可以工作

.cntr
{
        margin: 0 auto;
}

<div class="cntr" style="width: 130px">
         <img src="me.jpg" alt="me"  style="width: 130px" />
</div>

【讨论】：

margin 0 auto 应该用于 img 标签

【解决方案8】：

试一试，但不能 100% 确定它是否有效：

.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

【讨论】：

这很接近，但除非您指定固定宽度，否则它将不起作用。

【解决方案9】：

我会尝试text-align: center; inline style=""。

【讨论】：