0

次のように、div 内でテーブルを中央に配置するにはどうすればよいですか。

ここに画像の説明を入力

いくつかの方法を試しましたが、どれもうまくいきませんでした。ここにそれらの1つがあります。

<div style="width: 500px; height: 200px; border: 1px solid black; vertical-align: middle; text-align: center;">
    <table style="border: 1px solid black;">
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
    </table>
</div>

もしそうなら、それはどのように達成できますか？

4

2 に答える 2

0

センター タグは非推奨: <center> タグが HTML で非推奨になったのはなぜですか?

Joel Ethertonによるリンクは非常に優れています。そこにテーブルが表示されるように、いくつかのコードを提供したかっただけです。

私が作成したこの jsfiddle をチェックしてください: http://jsfiddle.net/25hzA/1/

jsfiddle がダウンしている場合。

HTML:

I am not being centered
<div class="block" style="height: 100px;">
 <div class="centered">
  <table style="width:100%;border: 1px solid black;">
   <tr>
    <td>testing</td>
    <td>testing</td>
   </tr>
  </table>
 </div>
</div>

CSS:

.block {
 text-align: center;
 background: #c0c0c0;
 border: #a0a0a0 solid 1px;
 margin: 20px;
}
.block:before {
 content:'';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 margin-right: -0.25em;
 /* Adjusts for spacing */
}
.centered {
 display: inline-block;
 vertical-align: middle;
 width: 300px;
 padding: 10px 15px;
 border: #a0a0a0 solid 1px;
 background: #f5f5f5; 
}
于 2013-05-22T15:09:00.173 に答える
0

いつでも<center>タグに入れるか、スタイルに中央のタグを入れることができます。確かに動作します！

それが別のdivにある場合は、left:50%;そのようなものを使用することもできます。

于 2013-05-22T14:38:57.570 に答える