web-dev-qa-db-ja.com

CSSクラスを使用してtd要素内にdivを配置する方法

この方法で動作しています

<td align="center">

しかし、CSSクラスを使用したいと思います。

このようにクラスを定義しましたが、運はありません

td
{
    vertical-align: middle;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align: center;
}

テキストに対して垂直方向の整列が機能し、テキストの整列が機能しています。ただし、この方法ではtd内のdivは調整されません。 divをtd内に配置したい。

htmlcenteralignmenthtml-table
62
MonsterMMORPG
div { margin: auto; }

これにより、divが中央に配置されます。

Divはそれ自体がブロック要素です。そのため、スタイルをdivの動作方法に定義する必要があります。

126
Luuk

問題の小さな（おそらく削減された）スニペットがなければ、私はあなたを大いに助けることはできません。問題が私が考えているものである場合、それはdivがデフォルトで100％幅を占有し、それ自体は整列できないためです。

後は、div内のインライン要素（テキストなど）をtext-align：center;で揃えることができます。それ以外の場合は、divをdisplay：inline-blockに設定することを検討できます;

インラインブロックルートを使用する場合は、お気に入りのIEハックを考慮する必要があります。

width:100px;
display:inline-block;
zoom:1; //IE only
*display:inline; //IE only

ハッピーコーディング:)

6
martin