1

DIV以下の表を、CSS でスタイル設定された一連のタグに変換したいと思います。私は を使用しており、タイプのトリックtext-alignに精通していますが、この単純なテーブル レイアウトと同じ結果が得られるものはありません。display: block;margin: auto

<table width="100%">
  <tr>
    <td align="center">
      <div>some objects</div>
    </td>
  </tr>
</table>

私がよく知っている他のアプローチを使用する際の問題は、整列しようとしているオブジェクトの幅を知っていることに依存していることです-私は知りません。ボタンや画像など、任意の幅のオブジェクトを中央に配置できるようにしたい。

4

8 に答える 8

0

あなたが使用することができますdisplay:table;

http://jsfiddle.net/3Z4E8/

<div class"table">
  <div class="row">
    <div class="cell" style="text-align:center">
      <div>some objects</div>
    </div>
  </div>
</div>


.table {
    display: table;
    width: 100%;
    border: 1px solid blue;
}
.row {
    display: table-row;
    border: 1px solid red;
}
.cell {
    display: table-cell;
    border: 1px solid green;
}

ドキュメントを参照してください。

于 2013-04-10T10:51:37.980 に答える
0

このようなdivを使用できるはずです...

HTML

<div class="example">
    Some objects!
</div>

CSS

.example {
    width: 60%;
    margin: 0 auto;
}

タグを画面の中央に表示するためにテーブルを使用しているだけだと少し推測していdivます-マージンスタイルがこれを行います。

要素でもあると思われる子要素を中央に配置divするには、2 つのことを行う必要があります。

.example {
    text-align: center;
}

.example .button {
    display: inline-block;
}

マークアップを見せていただければ、より具体的にすることができます - おそらくJSFiddleで。

于 2013-04-10T10:49:36.450 に答える
0

あなたがそこでやっていることは、まさにこれで達成できます：

<div>some objects</div>

CSS:

div{
    text-align:center;
}

もうファズは必要ありません。text-align基本的にコンテンツを中央に配置するため、他の要素をその div に配置すると、自動的に完全に中央に配置されます。

デモ

于 2013-04-10T10:49:46.747 に答える
0

内側の div を外側のコンテナーの中央に配置したいだけの場合は、(テーブルを使用せずに) 単純にこれを行うことができます。

<div class="parent">
   <div>some objects</div>
</div>

どこ.parentにある：

.parent
{
    text-align: center;
    width: 100%;
}

このフィドルを参照してください。

text-align:centerCSSを使用して、内部コンテンツを中央揃えにするだけです。

親コンテナーには、左端と右端に表示されるスペースを表示するのに十分な幅が必要であることに注意してください。

于 2013-04-10T10:50:52.780 に答える