CSS で水平方向、垂直方向の中央揃え、両端揃えのコード共有を実現する方法

単一行の垂直方向の中央揃え

単一行の垂直方向の中央揃えは line-height=width で直接行うことができます

<p  style="width:100px;height:100px;line-height:100px;">
<span>hello world</span>
</p>

このようにして、テキスト hello world を垂直方向の中央揃えにしたい場合は、親要素内で p 全体を中央揃えにします。外側にネストして p を 1 層にして、内側の p のマージンを通して実現します

<p style="position:relative;width:400px;height:200px;">
<p class="element" style="width:50%;height:50%;line-height:100px;">
<span>hello world</span>
</p>
</p>
.element {   position: absolute; left: 0; top: 0; right: 0; bottom: 0;   margin: auto 0;}

垂直方向のセンタリングが複数行

垂直方向のセンタリングが複数行ある場合、line-height は機能しません。 pのdisplay:table-cellを追加してからvertical-align:middle;

<p class="twoClass" >你好时间你好时间你好时间你好时间</p>
.twoClass{display:table-cell; width:200px; height:200px; vertical-align:middle;}

実際、この方法は単一行の垂直方向の中央揃えにも実行可能です。

水平方向の中央揃え

テキストの水平方向の中央揃えには、正の p を中央揃えにするだけで十分です。p の margin-left と margin-right を auto

<p style="position:relative;width:200px;height:200px;">
<p class="element" style="width:50%;height:50%;text-align:center;line-height:100px;">你好时间</p></p>
.element {   position: absolute; left: 0; top: 0; right: 0; bottom: 0;   margin: auto auto;}

に設定する必要があります。このデモの実装では、p とテキストが水平方向と垂直方向の中央に配置されます。

配置

複数行テキストの位置揃えについては、text-align:justify

<p style="position:relative;width:100px;height:400px;text-align:justify;">
hello world he hello world你好世界你好世界你好世界， he hello world he hello你好世界你好世界你好世界， world he hello world he hello world he 
</p>

この複数行テキストの最後の行は位置揃えされていないことに注意してください。

最後の行を操作したい場合は、text-align-last: justify; を使用できますが、互換性の問題があります。

単一行の両端を揃える

<p style="width:400px;text-align-last:justify;">
我好帅
</p>

予期せぬことに、text-align-last: justify; は実現できますが (Chrome)、IE ブラウザーでは効果がありません。 。 。

以下は、インターネット上で見つかったタグの両端を並べたものです

.demo{
     text-align-last:justify;
     line-height:0;
     height:44px;


}
.demo a{
     width:20%;
     display:inline-block;
     height:44px;
     line-height:44px;
     text-align:center;


}

<p>模块内的元素之间为换行符</p>
<br />
<p class="demo">
   <a class="link" href="#none">10元</a>
   <a class="link" href="#none">20元</a>
   <a class="link" href="#none">30元</a>
   <a class="link" href="#none">50元</a>
</p>
<br />
<p>模块内的元素之间为空格符</p>
<br />
<p class="demo">
<a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a>
</p>
<br />
<p>模块内的元素之间为无分隔符，justify不起作用</p>
<br />
<p class="demo"><a class="link" href="#none">选项1</a><a class="link" href="#none">选项2</a><a class="link" href="#none">选项3</a><a class="link" href="#none">选项4</a></p>

以上がCSS で水平方向、垂直方向の中央揃え、両端揃えのコード共有を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。