|
|
|
W3C勧告html4.01に準拠して、CSSだけで、ブロック要素のセンタリング、左寄せ、右寄せ
|
CSSテスト ブロック要素のセンタリング、左寄せ、右寄せ
センタリング、左寄せ、右寄せについて、html(xhtml)上でalign="center"などと書いてしまえば簡単ですが、W3C勧告html4.01において、「HTMLで視覚的整形に用いる要素や属性定義は非推奨」ということで、align=""は推奨されていません。webページのSEO（サーチエンジン最適化）は、W3C勧告準拠が強く望まれますので、align=""に替わるcssが必要になります。
cssでブロック要素のセンタリング1
<div style="width:450px;
padding:5px;
border:1px solid #cccccc;
margin:0 auto 0 auto;">
cssでブロック要素のセンタリング2
<div style="width:450px;
padding:5px;
border:1px solid #cccccc;
margin:0 auto;">
cssでブロック要素のセンタリング・インライン要素もセンタリング1
<div style="width:450px;
padding:5px;
border:1px solid #cccccc;
margin:0 auto 0 auto;
text-align:center;">
cssでブロック要素のセンタリング・インラインもセンタリング2
（div 二重）
<div style="width:450px;
padding:5px;
border:1px solid #cccccc;
margin:0 auto 0 auto;">
<div style="width:100%;
text-align:center;">
cssでブロック要素の入れ子のセンタリング
<div style="width:450px;
padding:5px;
border:1px solid #cccccc;
margin:0 auto 0 auto;
text-align:center;">
cssでブロック要素の左寄せ
<div style="width:450px;
padding:5px;
border:1px solid #cccccc; margin-left:0;
margin-right:auto;">
cssでブロック要素の左寄せ・左マージン20px
<div style="width:450px;
padding:5px;
border:1px solid #cccccc; margin-left:20px;
margin-right:auto;">
cssでブロック要素の右寄せ
<div style="width:450px;
padding:5px;
border:1px solid #cccccc;
margin-left:auto;
margin-right:0;">
cssでブロック要素の右寄せ・右マージン20px
<div style="width:450px;
padding:5px;
border:1px solid #cccccc;
margin-left:auto;
margin-right:20px;">
|
|
