CSSで水平方向のセンタリングを設定するにはどうすればよいですか? CSS で水平方向のセンタリングを設定する 2 つの方法-CSSチュートリアル-php.cn

css スタイルは水平方向のセンタリングを実現できますが、css の水平方向のセンタリングを設定するにはどうすればよいですか? この記事では、CSSの水平方向の中央揃えを実装する方法を共有します。

CSS では、インライン要素の水平方向の中央揃えとブロックレベルの要素の水平方向の中央揃えを設定できます。インライン要素とブロックレベルの要素について知らない学生は、ブロックレベルの定義とは何かを参照してください。 CSSの要素？ CSS ブロックレベル要素とは何ですか? および CSS インライン要素とは何ですか? CSS ブロックレベル要素とインライン要素の違いこれら 2 つの記事では、CSS の 2 つの水平方向の中央揃え設定を直接見てみましょう。

まず、CSSを使用してインライン要素を水平方向に中央揃えに設定する方法を見てみましょう。

最初のタイプ: CSS インライン要素は水平方向に中央揃えになります:

構文: div{text-align:center} /*DIV 内のインライン要素は水平方向に中央揃えになります*/

簡単な説明:親要素の text-align:center スタイル。

<div style="text-align: center">
    <span>行内元素水平居中</span>
</div>

ログイン後にコピー

詳細説明:

1. Text ここで、「text」という 2 つの単語をラベルに対して水平方向に中央揃えすることは意味がありません。ラベルはインライン要素であり、その幅はの幅、つまり「テキスト」という 2 文字は常に水平方向に中央揃えになります。

Text

この時点で、p はブロックレベルの要素であり、その幅は 1 行を占めるのに対し、テキストは 2 行しか占有しないため、2 つの単語「Text」を水平方向に中央揃えにするのが合理的です。このとき、p 要素に text-align:center を設定すると、「text」という 2 つの単語が 1 行で水平方向に中央揃えになります。

Text

、ラベル要素を div に対して水平方向に中央揃えする方法。

CSS インライン要素の水平方向のセンタリングを読んだ後、 CSS ブロックレベル要素の水平方向のセンタリングについて説明します。 CSS ブロックレベル要素の水平方向のセンタリングは、固定幅のブロックレベル要素の水平方向のセンタリングと、可変幅のブロックレベル要素の水平方向の中央揃えについては、個別に見てみましょう。

2 番目のタイプ: CSS 固定幅ブロックレベル要素は水平方向に中央に配置されます。これは、ブロックレベル要素と固定幅要素の両方です。

水平方向に中央揃えにする必要があるブロックレベル要素の左右のマージン値を auto に設定します。

例:

<div>
    <div style="width: 100px;height: 100px;background-color: green;margin: 0 auto">
    </div></div>

ログイン後にコピー

css 可変幅のブロックレベル要素は水平方向に中央揃えになります。可変幅の -level 要素

例:

1. ブロックレベルの要素をタグに追加します。

<table style="margin: 0 auto">
    <tbody>
        <tr><td>
                <div>设置table实现水平居中</div>
    </td></tr>
    </tbody></table>

ログイン後にコピー

2. ブロックレベル要素のスタイル display:inline を設定し、親要素に text-align:center スタイルを追加します。

<div style="text-align: center">
    <div style="display: inline">
        设置inline实现水平居中    
 </div></div>

ログイン後にコピー

3. 親要素をブロックレベル要素に追加し、親要素のスタイルを style="float:left;position:relative;left:50%" に設定します。 ="float: left;position:relative;left:-50%"

<div style="float:left;position:relative;left: 50%">
    <div style="position: relative;left: -50%">
        设置relative实现水平居中
    </div>
</div>

ログイン後にコピー