CSSのtext-align属性の使い方-CSSチュートリアル-php.cn

CSSのtext-align属性の使い方

青灯夜游

リリース： 2019-05-28 09:37:24

オリジナル

4907 人が閲覧しました

css text-align プロパティは、要素内のテキストの水平方向の配置を設定するために使用されます。このプロパティは、ラインボックスが整列する位置を指定することによって、ブロックレベル要素内のテキストの水平方向の整列を設定します。値 justify は、ユーザーエージェントが行コンテンツ内の文字と単語の間の間隔を調整できるようにすることでサポートされており、ユーザーエージェントによって異なる結果が得られる場合があります。

CSSのtext-align属性の使い方

#css text-align 属性を使用するにはどうすればよいですか?

text-align 属性は、要素内のテキストの水平方向の配置を指定します。

構文:

text-align : left | right | center | justify | inherit;

ログイン後にコピー

属性値:

● Left: テキストを左に配置します。デフォルト: ブラウザによって決定されます。

# 右: テキストを右に配置します。

##●center: テキストを中央に配置します。

##●両端揃え: テキストを両端に揃える効果を実現します。

## ● Inherit: text-align 属性の値を親要素から継承することを指定します。

説明:

この属性は、行ボックスが整列する点を指定することによって、ブロックレベル要素内のテキストの水平方向の整列を設定します。値 justify は、ユーザーエージェントが行コンテンツ内の文字と単語の間の間隔を調整できるようにすることでサポートされており、ユーザーエージェントによって異なる結果が得られる場合があります。

注: すべてのブラウザは text-align 属性をサポートしています。属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。

css text-align 属性の例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.box{
				width: 400px;
				height: 200px;
				border: 1px solid red;
			}
			h1 {
				text-align: center
			}
			
			h2 {
				text-align: left
			}
			
			h3 {
				text-align: right
			}
		</style>
	</head>

	<body>
		<div class="box">
			<h1>这是标题 1</h1>
			<h2>这是标题 2</h2>
			<h3>这是标题 3</h3>
		</div>
		
	</body>

</html>

ログイン後にコピー

レンダリング:

以上がCSSのtext-align属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。