paparan pusat tetapan html-Soal Jawab bahagian hadapan-php.cn

paparan pusat tetapan html

WBOY

Lepaskan： 2023-05-21 17:07:37

asal

27287 orang telah melayarinya

HTML ialah salah satu bahasa penanda yang paling biasa digunakan dalam reka bentuk web, dan paparan berpusat juga merupakan salah satu kaedah paparan paling asas dalam reka bentuk web. Artikel ini akan memperkenalkan cara menggunakan HTML untuk menetapkan paparan berpusat dalam halaman web.

1. Pemusatan mendatar

1.1 Menggunakan atribut penjajaran teks

Anda boleh menggunakan atribut penjajaran teks untuk memusatkan elemen HTML secara mendatar. Atribut ini boleh ditetapkan pada elemen induk untuk memusatkan elemen anaknya secara mendatar.

Kod sampel:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        text-align: center;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

Salin selepas log masuk

1.2 Menggunakan atribut margin

Anda juga boleh menggunakan atribut margin untuk mencapai pemusatan mendatar. Ambil perhatian bahawa kaedah ini hanya berfungsi untuk elemen dengan lebar tetap.

Kod contoh:

<!doctype html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        margin: 0 auto;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

Salin selepas log masuk

2. Pemusatan menegak

2.1 Gunakan atribut penjajaran teks

Jika anda perlu mencapai pemusatan menegak dalam elemen HTML, tambahkannya pada elemen induk Anda boleh menetapkan paparan: atribut jadual pada elemen, dan paparan: sel jadual dan jajaran menegak: atribut tengah pada elemen anak.

Kod sampel:

<!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>

Salin selepas log masuk

2.2 Menggunakan atribut flex

Cara lain untuk mencapai pemusatan menegak ialah menggunakan atribut flex. Tetapkan paparan: lentur pada elemen induk, dan tetapkan item penjajaran: tengah dan justify-kandungan: pusat sifat pada elemen anak untuk mencapai pemusatan menegak.

Kod contoh:

<!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>

Salin selepas log masuk

Kedua-dua kaedah boleh mencapai pemusatan dalam HTML dengan mudah. Perlu diingat bahawa apabila menggunakan atribut margin untuk pemusatan mendatar, anda mesti menentukan lebar tetap dan menetapkan nilai kiri dan kanan atribut margin kepada auto untuk mencapai paparan berpusat.

Ringkasan:

Artikel ini memperkenalkan dua kaedah pemusatan mendatar dan dua kaedah pemusatan menegak Sifat penjajaran teks dan jidar sesuai untuk pemusatan mendatar, manakala paparan: jadual, paparan: lentur dan menegak -selaraskan sifat terpakai pada pemusatan menegak. Sama ada cara, pemusatan dalam HTML adalah mudah.

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