2.レイアウトソリューション-水平レイアウト<1>
3540 ワード
中央のレイアウト
水平レイアウトは2つの箱を書き出し、以下の条件を満たす:1.中の幅は箱が固定していません.外箱の幅が固定されていない
第1のソリューションinline-block+text-align
水平レイアウトは2つの箱を書き出し、以下の条件を満たす:1.中の幅は箱が固定していません.外箱の幅が固定されていない
第1のソリューションinline-block+text-align
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
text-align: center;
}
.son{
background: pink;
height: 200px;
display: inline-block;
*display: inline;
*zoom: 1;
}
</style>
<div class="parent">
<div class="son">DEMODEMODEMO</div>
</div>
</code></pre>
<p> ， son ， <br/> display:table+margin</p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
}
.son{
background: pink;
height: 200px;
display: table;
margin: 0 auto;
}
</style>
<div class="parent">
<div class="son">DEMODEMODEMO</div>
</div>
</code></pre>
<p>display: table; ， 。 <br/> display: table; ， <br/> 2 table </p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
}
.son{
background: pink;
height: 200px;
margin: 0 auto;
}
</style>
<div class="parent">
<table class="son">
<tr>
<td> </td>
</tr>
</table>
</div>
</code></pre>
<p> absolute+transform</p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
position: relative;
}
.son{
background: pink;
height: 200px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="parent">
<div class="son"> </div>
</div>
</code></pre>
<p> ， transform <br/> </p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style>
body{
margin: 0;
}
.parent{
background: gray;
height: 200px;
display: flex;
justify-content: center;
}
.son{
background: pink;
height: 200px;
}
</style>
<div class="parent">
<div class="son"> </div>
</div>
</code></pre>
<p> display:flex; flex item auto, son ， son margin:0 auto;<br/> ， 。</p>
</article>
</div>
</div>