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

あなたがしなければならないのは、左右からマージンを宣言することです（上下はオプションです）：

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

またはあなたはただ使うことができます

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

If you don't have to just don't use <table> tag. Use <div> instead.

于 2012-04-06T12:23:35.027 に答える
1

注意align="center"は HTML 5 ではサポートされていません。http://www.w3schools.com/tags/tag_td.aspを参照してください。

于 2013-06-17T13:30:08.370 に答える
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

これが私がやった方法です。ベースの 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

試す

.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;inline style="" で試してみます。

于 2012-04-06T12:49:07.827 に答える