tetapan pusat html

Tetapan pemusatan HTML

Dalam reka bentuk web, adalah keperluan yang sangat biasa untuk memusatkan teks, gambar dan elemen lain. Berikut akan memperkenalkan beberapa tetapan pemusatan HTML.

1. Pemusatan teks

Anda boleh menggunakan atribut penjajaran teks untuk mencapai kesan pemusatan mendatar teks, seperti yang ditunjukkan dalam kod berikut:

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

Jika anda mahu teks dipusatkan secara menegak, anda boleh Gunakan atribut line-height dan atribut height, seperti yang ditunjukkan dalam kod berikut:

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

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

2. Tengahkan imej

Anda boleh menggunakan atribut margin dalam CSS untuk mencapai kesan pemusatan mendatar imej, seperti yang ditunjukkan dalam kod berikut :

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

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

Jika anda mahu imej dipusatkan secara menegak, anda boleh menggunakan atribut kedudukan dan atribut atas, sebagai ditunjukkan dalam kod berikut:

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

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

3 Bekas berpusat

Jika anda mahu keseluruhan bekas dipusatkan Untuk memusatkan, anda boleh menggunakan atribut paparan dan atribut margin dalam CSS, sebagai ditunjukkan dalam kod berikut:

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}
</style>

<div class="container">
  <p>这是一个居中的容器。</p>
</div>

Di atas adalah beberapa tetapan pemusatan HTML yang biasa digunakan, yang boleh digunakan secara fleksibel mengikut keperluan.

Atas ialah kandungan terperinci tetapan pusat html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!