1

このページでは、フェスティバルに出演するアーティストのリストを示します。アーティストの配置はisotope<div>によって制御されます (多数のアーティストがいてアーティストの身長が異なる場合、CSS だけを使用してすべてを適切に並べるのは非常に困難でした)。div

とにかく、以下に示すように、アーティストの左右に同じ量の空白ができるように、アーティストの div を親コンテナー内の中央に配置したいと思います。

ここに画像の説明を入力

私は次のような明白なことをすべて試しました：

margin: 0 auto
text-align: center

しかし、これまでのところ運がありません....

4

2 に答える 2

1

ブートストラップグリッドのようなものを使ってみましたか? それはあなたの人生をとても楽にしてくれます。

コンテナーを定義するだけで、ブートストラップ グリッドがすべての面倒な作業を行います。さまざまなデバイスへの調整を含めます:)

<!-- simple three column display that will take seconds to create -->
<div class="container">
  <div class="row">
    <div class="span4">/div>
    <div class="span4">/div>
    <div class="span4"></div>
 </div>

Twitter ガイドの Bootstrap Grid

ブートストラップ テキスト チュートリアル

ブートストラップ ビデオ チュートリアル

于 2013-05-19T20:10:32.413 に答える
1

親は持っている必要があります

text-align:center; width:abc;

そしてある程度の幅。それから子供は持っているべきです

margin:auto; text-align:left; width:xyz;

例：

<div style="width:100%; text-align:center;">
    <div style="width:50%; text-align:left; background:red; margin:auto;">
        This will do it just right
    </div>
</div>

これが機能しない場合は、他の何かが動作に影響を与えているかどうかを実際に確認する必要があります!

于 2013-05-19T20:10:42.070 に答える