div
aを水平方向と垂直方向の両方でセンタリングするために多くの検索を行いました。これはどこにでもある方法です。
div {
position:fixed;
top:50%;
left:50%;
margin-left:(div width/2)
margin-top: (div height/2)
}
div
テーブル内にラップすることにより、水平方向と垂直方向の両方でa を中央に配置する新しい解決策を見つけました。私はie7以上と他のブラウザでテストしました。
例を次に示します: http://jsbin.com/ocenok/2/
最初の方法は、インターネットや SO などのどこにでもあり、事前に幅と高さの知識が必要であるか、通常は Javascript を介して計算されるのではないかと思っていました。
テーブルのアプローチは完璧に見え、javascript も固定の高さ/幅も必要としません。
テーブルアプローチに欠点はありますか?
(中央に配置したいdivの高さ/幅がわかりません。)
更新(私の質問をより明確にするために):
私自身、非表形式/レイアウト データにテーブルを使用するのは嫌いです。
- 私が望むことは、Javascript を使用して簡単に実現できることを知っています。
- を使用してこれを達成できると考え
display:table
、IE7 サポートを無効にしました。
しかし、私が理解しようとしているのは、単一の<table>
要素を使用してこれを達成できる場合、欠点があればそれは何かということです。
HTML
Answers here および同様の質問を確認すると、すべての有効な要素、構文、およびルールを使用しているにもかかわらず、誰もこの方法を推奨していません。
誰もがプレゼンテーションを処理するために を使用することを推奨している場合、 を使用javascript
して簡単に使用できる場合でも、CSS
いくつかの欠点があるに違いありません。
コード :
<table>
<tr>
<td>
<div>This is div that needs to be centered.</div>
</td>
</tr>
</table>
次に、次の CSS を適用します。
table {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
table td {
width : 100%;
text-align: center;
}
div {
width:100px;
height:100px;
background:pink;
margin: 0 auto;
}