4

テーブル要素のテーブル セルのサイズをウィンドウのサイズに合わせて調整し、常にウィンドウ内に収まるようにする Web サイトを作成しようとしています。ここに私が持っているものがあります:

.table {
  display: table;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.tablecell {
  display: table-cell;
}
<div class="table">
  <div class="tablecell">
    <image src="fb.png">
  </div>
  <div class="tablecell">
    <image src="twitter.png">
  </div>
  <div class="tablecell">
    <image src="youtube.png">
  </div>
  <div class="tablecell">
    <image src="apple.png">
  </div>
  <div class="tablecell">
    <image src="email.png">
  </div>
</div>

これを台無しにしているのはwidth:100%. これが結果の写真です。問題のスペースを青で囲みました。ソウルジャボーイの顔は無視。

基本的に、YouTube の画像がページの中央にくるように、これを正しく中央に配置したいだけです。を使用して作成されたスペースはそれをwidth:100%防ぎますが、テーブルが常にウィンドウ内に収まるように、これまたは同様のプロパティを使用したいと考えています。

4

2 に答える 2

5

画像が左に並んでいるという事実を見ているだけだと思います。text-align:center; を試してください。、 このような：

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .tablecell {
         display:table-cell;
         text-align:center;
     }

jsFiddle: http://jsfiddle.net/q73LK/

補足として、セルにクラスを使用する必要はありません。代わりにこれを行うことができます：

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .table div {
         display:table-cell;
         text-align:center;
     }

補足として、画像に「alt」属性がありません。有効な HTML の場合、「alt」属性を含める必要があります。このような：

<div class="table">
    <div class="tablecell"><image alt="fb" src="fb.png"/></div>
    <div class="tablecell"><image alt="twitter" src="twitter.png"/></div>
    <div class="tablecell"><image alt="youtube" src="youtube.png"/></div>
    <div class="tablecell"><image alt="apple" src="apple.png"/></div>
    <div class="tablecell"><image alt="email" src="email.png"/></div>
</div>
于 2013-08-29T20:51:15.013 に答える
2

div は正しく配置されていますが、その中の画像はそうではありません。

ここをチェックしてください：http://jsfiddle.net/CzaK5/

に追加text-align:center;するだけ.tablecellです。

編集：ライアンヘンダーソンが私を打ち負かしました。

于 2013-08-29T20:52:29.113 に答える