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

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで水平方向のセンタリングを設定するにはどうすればよいですか? CSS で水平方向のセンタリングを設定する 2 つの方法

不言

Sep 10, 2018 pm 01:59 PM

css 中心レベル

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>

ログイン後にコピー

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7711

Java チュートリアル

1640

CakePHP チュートリアル

1394

Laravel チュートリアル

1288

PHP チュートリアル

1232

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。