ホームページ > 記事 > ウェブフロントエンド > HTML設定センター表示
HTML設定センター表示
- WBOYオリジナル
- 2023-05-21 17:07:3727169ブラウズ
HTML は Web デザインで最も一般的に使用されるマークアップ言語の 1 つであり、中央表示も Web デザインで最も基本的な表示方法の 1 つです。この記事では、HTMLを使ってWebページの中央表示を設定する方法を紹介します。
1. 水平方向の中央揃え
1.1 テキスト配置属性の使用
text-align 属性を使用して、HTML 要素を水平方向の中央揃えに配置できます。この属性を親要素に設定して、子要素を水平方向に中央揃えにすることができます。
サンプル コード:
<!doctype html>
<html>
<head>
<style>
.container {
text-align: center;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>1.2 margin 属性の使用
margin 属性を使用して水平方向の中央揃えを実現することもできます。このメソッドは固定幅の要素に対してのみ機能することに注意してください。
サンプル コード:
<!doctype html>
<html>
<head>
<style>
.container {
width: 500px;
margin: 0 auto;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>2. 垂直方向の中央揃え
2.1 テキスト配置属性を使用する
HTML 要素で垂直方向の中央揃えを実現する必要がある場合は、親要素に追加します。要素に display: table 属性を設定し、子要素に display: table-cell 属性とvertical-align: middle 属性を設定できます。
サンプル コード:
<!doctype html>
<html>
<head>
<style>
.container {
display: table;
height: 500px;
width: 100%;
background-color: gray;
}
.inner {
display: table-cell;
vertical-align: middle;
}
</style>
<head>
<body>
<div class="container">
<div class="inner">
<p>这是一段文字</p>
</div>
</div>
</body>
</html>2.2 flex 属性の使用
垂直方向の中央揃えを実現するもう 1 つの方法は、flex 属性を使用することです。親要素に display: flex を設定し、子要素に align-items: center および justify-content: center プロパティを設定して、垂直方向の中央揃えを実現します。
サンプルコード:
<!doctype html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 100%;
background-color: gray;
}
</style>
<head>
<body>
<div class="container">
<p>这是一段文字</p>
</div>
</body>
</html>どちらの方法でも、HTML での中央揃え表示を簡単に実現できます。水平方向の中央揃えに margin 属性を使用する場合、中央揃え表示を実現するには、固定幅を指定し、margin 属性の左右の値を auto に設定する必要があることに注意してください。
概要:
この記事では、2 つの水平方向の中央揃え方法と 2 つの垂直方向の中央揃え方法を紹介します。text-align プロパティと margin プロパティは水平方向の中央揃えに適していますが、display: table、display: flex、および垂直方向の中央揃えには適しています。 -align プロパティは垂直方向の中央揃えに適用されます。いずれにしても、HTML での中央揃えは簡単です。
以上がHTML設定センター表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。