如何将图像居中放在表格中？

Question

我想将图像居中（中间+中间），将h2中的标题放在表格列（td）中

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 Bootstrap

Answer 1

你可以尝试：

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

Answer 2

N.B。 HTML 5不支持 align =“center”;见http://www.w3schools.com/tags/tag_td.asp

Answer 3

尝试

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

Answer 4

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

只需添加<td>＆gt;＆gt; <td align="center" valign="middle"><image path></td>

您也可以使用css check DEMO

执行此操作

Answer 5

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

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

或者您可以使用

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

如果您不必使用<table>标记。请改用<div>。

Answer 6

我是这样做的。 我调用基本的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>

Answer 7

这应该有效

.cntr
{
        margin: 0 auto;
}

---

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

Answer 8

尝试一下，但不能100％确定它是否有效：

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

Answer 9

我会在内联样式=“”中尝试text-align: center;。