HTMLセンター設定

HTML 中央の設定

Web デザインでは、テキスト、画像、その他の要素を中央に配置することが非常に一般的な要件です。以下に、いくつかの HTML センタリング設定を紹介します。

1. テキストの中央揃え

次のコードに示すように、text-align 属性を使用してテキストの水平方向の中央揃えの効果を実現できます。テキストを垂直方向の中央に配置したい場合は、次のコードに示すように、line-height 属性と height 属性を使用します。

<p style="text-align:center;">这是一段居中的文本。</p>

2. 画像の中央揃え

margin 属性を使用できます。次のコードに示すように、CSS で画像を水平方向に中央揃えにする効果を実現します。

<style>
.container {
  height: 300px;
  line-height: 300px;
  text-align: center;
}
</style>

<div class="container">这是一段居中的文本。</div>

画像を垂直方向に中央揃えにしたい場合は、次のコードに示すように、position 属性と top 属性を使用できます。次のコード:

<style>
.container {
  text-align: center;
}
img {
  margin: 0 auto;
}
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

3. コンテナが中央に配置されます

コンテナ全体を中央に配置したい場合は、次のように CSS の display 属性と margin 属性を使用できます。次のコード:

<style>
.container {
  position: relative;
  height: 400px;
}
img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

<div class="container">
  <img src="image.jpg" alt="图片">
</div>

上記は、一般的に使用される HTML の中央揃え設定のいくつかであり、ニーズに応じて柔軟に使用できます。

以上がHTMLセンター設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。