7

我想在表格列（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 Bootstrap

4

9 回答 9

27

你可以试试：

.centered { vertical-align:middle; text-align:center; }
.centered img { display:block; margin:0 auto; }
于 2012-04-06T14:14:31.707 回答
1

这是我的做法。我调用了基本的 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>
于 2012-07-26T13:42:47.730 回答
1

这应该工作

.cntr
{
        margin: 0 auto;
}

<div class="cntr" style="width: 130px">
         <img src="me.jpg" alt="me"  style="width: 130px" />
</div>
于 2013-09-13T19:27:49.090 回答
1

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

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

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

于 2012-04-06T12:10:42.320 回答
1

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

于 2013-06-17T13:30:08.370 回答
1

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

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

或者你可以使用

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

如果您不必只是不使用<table>标签。改为使用<div>。

于 2012-04-06T12:23:35.027 回答
1

尝试

.centered{width: 50px; margin: 0px, auto, 0px, auto;}
于 2012-04-06T12:06:24.973 回答
0

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

.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
于 2012-04-06T12:06:25.753 回答
-1

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

于 2012-04-06T12:49:07.827 回答