4

テキストと画像のいくつかのブロックを隣り合わせに配置する必要がある Web サイトを作成しています。しかし、私はそれらを中心にしたいとも思っています。これらの要素ごとに設定されたサイズを使用しているため、誰かが画面のサイズを変更した場合、ページで隣り合わせに配置された div の数を変更し続ける必要があります。通常は float:left; を使用します。このためですが、ページを中央に配置したいので、うまくいきません。

したがって、次のようになります。

________
|1 2 3 4| 
|  5 6  |
|_______|

しかし、画面のサイズを変更すると、次のようになります。

______
|1 2 3|
|4 5 6|
|_____|

サイズを大きくすると、次のようになります。

___________
|1 2 3 4 5 |
|    6     |
|__________|

現在、css は次のようになっています。

 div.child{
width:23%;
float:left;
height:600px;
padding:0px;
min-width:200px;
max-width:230px;
overflow:hidden;
text-align:center;
border-style:solid;
border-width:5px;
overflow:visible;
display:inline-block;
}

と

div.parrent{
padding:0px;
border-style:solid;
border-top-style:solid;
border-width:5px;
overflow:hidden;
text-align:center;
}

ヒントはありますか？

4

3 に答える 3

5

それらをすべて作成display:inline-blockし、親を have に設定しますtext-align:center。

デモ 1: http://jsfiddle.net/xdEmz/1/

デモ 2: http://jsfiddle.net/E5sHa/2/

デモ 2 のスクリーンショット

各アイテム内の画像を中央に配置する場合は、次のいずれかを実行できます。

  • 画像をdisplay:inline(デフォルト) のままにtext-align:centerし、親からフローを通過させ、明示的に使用し<br>てそれらの後に強制的にラップするか、または
  • 画像をdisplay:block(上の 2 番目のデモで行ったように) に設定し、 を使用margin:0 autoして親コンテナー内で水平方向に中央揃えにすることができます。
于 2012-12-26T14:24:55.090 に答える
2

min-widthとmax-widthで コンテナを作成してこれを行うことができますtext-align:center。

ここに画像の説明を入力

于 2012-12-26T14:23:17.607 に答える
2

個々の要素を表示します: インラインおよびコンテナ要素でテキストを中央に揃えます...例はこちらhttp://psarink.org/gallery.php

于 2012-12-26T14:27:30.543 に答える