ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSを使用してdiv内のテキストを右に移動します

CSSを使用してdiv内のテキストを右に移動します

青灯夜游
リリース: 2023-01-03 09:24:30
オリジナル
11407 人が閲覧しました

CSS では、div 要素に「text-align: right;」スタイルを追加して、div 内のテキストを右に移動できます。 text-align 属性は要素内のテキストの水平方向の配置を設定することができ、属性値を「right」に設定するとテキストを右に配置できます。

CSSを使用してdiv内のテキストを右に移動します

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css は div 内のテキストを右に実装します

//文字右边对齐
div{text-align: right;}
ログイン後にコピー

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

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

#値説明leftテキストを左側に表示できます。デフォルト: ブラウザによって決定されます。 #rightcenterjustify[推奨チュートリアル:
テキストを右に配置します。
テキストを中央に配置します。
テキストを両端に揃える効果を実現します。
CSS ビデオ チュートリアル

]例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 500px;
				padding: 10px;
				background: palegoldenrod;
			}
			.box{
				text-align: right;
			}
		</style>
	</head>

	<body>
		<div>div中的测试文本--默认</div>
		<div class="box">div中的测试文本--右边对齐</div>
	</body>

</html>
ログイン後にコピー

レンダリング:


CSSを使用してdiv内のテキストを右に移動しますプログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 !

以上がCSSを使用してdiv内のテキストを右に移動しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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