ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで水平方向の配置を設定する方法
CSS で水平方向の配置を設定する方法: 1. "text-align: center;" スタイルを使用してテキスト要素の水平方向の中央揃えを設定します; 2. "margin: auto;" スタイルを使用して設定しますブロック要素の水平方向の中央揃え。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
1. text-align: center;
text-align 属性を使用して、要素テキストの水平方向の配置を指定します。
属性値:
left テキストを左に配置します。デフォルト: ブラウザによって決定されます。
#右 テキストを右に配置します。
#center テキストを中央に配置します。
#justify テキストを両端に揃える効果を実現します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>文本居中对齐</h2>
<div class="center">
<p>文本居中对齐。</p>
</div>
</body>
</html>レンダリング:
#[推奨チュートリアル:
margin: auto;margin 省略属性を使用して、すべての外側マージンを 1 つのステートメント距離に設定します属性。
属性値:
要素の幅を設定すると、要素がコンテナの端にオーバーフローするのを防ぎます。
この要素は幅を指定し、両側の空のマージンを均等に配分します
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<div class="center">
<p>div 元素是居中的</p>
</div>
</body>
</html>
プログラミング関連の知識について詳しくは、
以上がCSSで水平方向の配置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。