CSS水平中央設定
19508 ワード
1.行内要素が水平方向に中央に配置されている
設定された要素がテキスト、ピクチャなどの行内要素である場合、水平中央は親要素に
text-align:centerを設定することによって実現される.次のコードがあります.htmlコード:
<body>
<div class="txtCenter"> ， ， 。div>
body>cssコード:
div.txtCenter{
text-align:center;
}2.一定幅のブロック要素が水平中央にある
要素がブロック要素に設定されている場合text-align:centerでは機能しません.この場合も、定幅ブロック要素と不定幅ブロック要素の2つに分けられます.次に、幅の広いブロック要素について説明します.
定幅とブロックの2つの条件を満たす要素は、「左右margin」の値を「auto」に設定することで中央に配置できます.例としてdivというブロック要素を水平に中央に設定します.
htmlコード:
<body>
<div> ， ， 。div>
body>cssコード:
div{
border:1px solid red; /* div */
width:500px; /* */
margin:20px auto; /* margin-left margin-right auto */
}次のように書くこともできます.
margin-left:auto;
margin-right:auto;注意:要素の「上下margin」は任意に設定できます.
3.不定幅ブロック要素が水平中央
実際の作業では、ページの数が不確定なため、幅を設定することで弾力性を制限することはできません.
不定幅のブロック要素は3つの方法で中央に位置する(この3つの方法は現在使用されているものが多い):1.tableラベル2を加える.ディスプレイを設定します.inlineメソッド3.設定position:relativeとleft:50%;
tableラベルの追加
ステップ1:設定する中央の要素の外側にtableラベル(、、を含む)を追加します.
第2歩:このtableに「左右margin中央」を設定します(これはブロック要素を広くする方法と同じです).
例を次に示します.
htmlコード:
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
ul>
td>tr>
tbody>
table>
div>cssコード:
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}ディスプレイを設定します.inlineメソッドの2つ目の方法:ブロックレベル要素のdisplayをinlineタイプに変更し、text-align:centerを使用して中央効果を実現します.次の例を示します.
htmlコード:
<body>
<div class="container">
<ul>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
ul>
div>
body>cssコード:
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}この方法は、第1の方法に比べて、無意味ラベルを増やさずにラベルのネスト深さを簡略化する利点があるが、ブロック要素のdisplayタイプをinlineに変更し、行内要素になったため、長さ値を設定するなどの機能が少なくなるという問題もある.
設定position:relativeとleft:50%
親要素にfloatを設定し、親要素にposition:relativeとleft:50%を設定し、子要素にposition:relativeとleft:-50%を設定することで水平中央を実現します.例を次に示します.
htmlコード:
<body>
<div class="container">
<ul>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
ul>
div>
body>cssコード:
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}この方法はブロック要素を保持してもdisplay:blockの形式で表示することができ,利点は無言のテーブルラベルを追加せず,ネスト深さを増加させないが,position:relativeを設定し,一定の副作用をもたらすという欠点がある.
この3つの方法はいずれも非常に広く使われており、それぞれメリットとデメリットがあり、具体的にどの方法を選ぶかは、具体的な状況によって異なります.