ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSテキストを中央揃えにする方法

CSSテキストを中央揃えにする方法

anonymity
リリース: 2019-05-28 15:23:41
オリジナル
12420 人が閲覧しました

CSS text-align

text-align 構文:

text-align : left | right | center | justify
ログイン後にコピー

text-align パラメータ値と説明:

left: 左揃え

right: 右揃え

center: 中央揃え

##*justify: 両端揃え (推奨されません。通常、ほとんどのブラウザでは使用されません)

us 一般的に使用されますtext-align のパラメータ値は left、right、centerです。

text-align 関数の説明:

オブジェクト内のテキストの左揃え、中央揃え、右揃えを設定または取得します。

CSSテキストを中央揃えにする方法

ケースのデモ:

3 つのボックスを設定し、ボックスの CSS 高さと CSS 幅を同じに設定します。を選択し、個別に設定します。 3 つのボックスの内容は、左、中央、右に揃えられます。

3 つのボックスの高さを 50 ピクセル、幅を 300 ピクセルに設定します。見やすくするために、3 つのボックスに黒い枠線のスタイルを設定します。

1、HTML CSS コード

1)、CSS コード

.div1{ width:300px; height:50px; border:1px solid #000; text-align:left} 
.div2{ width:300px; height:50px; border:1px solid #000; text-align:center} 
.div3{ width:300px; height:50px; border:1px solid #000; text-align:right} 
/*  
div1 div2 div3 分别设置 靠左 居中 靠右对齐 
*/
ログイン後にコピー

2)、HTML コード

<div class="div1">我被靠左对齐</div> 
<div class="div2">我被居中显示</div> 
<div class="div3">我被靠右对齐</div>
ログイン後にコピー

以上がCSSテキストを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート