Bagaimana untuk memusatkan div dengan css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memusatkan div dengan css

王林

Lepaskan： 2023-05-21 10:00:37

asal

3829 orang telah melayarinya

CSS ialah bahagian penting dalam pembangunan bahagian hadapan. Ia boleh membantu kami mengindahkan halaman web dan menjadikannya lebih cantik, mudah difahami dan dinavigasi. Dalam reka bentuk web, selalunya perlu untuk memusatkan elemen div untuk menjadikan halaman lebih elegan Artikel ini akan memperkenalkan cara menggunakan CSS untuk memusatkan elemen div.

Dalam CSS, terdapat cara untuk memusatkan elemen div, dan ia berfungsi dengan menggunakan sifat margin. Pertama, kita perlu menetapkan lebar dan ketinggian elemen div kita, dan kemudian mengisi ruang tambahan dengan sifat margin. Mari kita lihat cara untuk mencapai kesan pemusatan:

Kaedah 1: Gunakan atribut penjajaran teks

Sebelum kedudukan relatif dan kedudukan mutlak, kita boleh cuba menggunakan atribut penjajaran teks . Atribut ini digunakan untuk pemusatan mendatar, tetapi lebar mesti ditetapkan untuk elemen. Contohnya:

<style>
    .container {
      width: 60%;
      text-align: center;
      border: 1px solid black;
    }
    .content {
      width: 40%;
      background-color: lightgray;
    }
</style>
<body>
  <div class="container">
    <div class="content">居中显示</div>
  </div>
</body>

Salin selepas log masuk

Dalam contoh ini, kami meletakkan div dan kandungannya dalam elemen induk, dan kemudian menetapkan atribut penjajaran teks bagi elemen induk ke tengah, yang akan menjadikan elemen div secara mendatar Atas dan pusat. Tetapi kaedah ini hanya berfungsi untuk elemen peringkat blok.

Kaedah 2: Gunakan atribut margin

Gunakan atribut margin untuk memusatkan elemen, yang boleh digunakan untuk pemusatan mendatar dan menegak. Kita boleh mencapai penjajaran tengah menggunakan kod berikut:

<style>
  .container {
    height: 150px;
    border: 1px solid black;
  }
  .content {
    width: 30%;
    height: 50%;
    margin: auto;
    background-color: lightgray;
  }
</style>
<body>
  <div class="container">
    <div class="content">居中显示</div>
  </div>
</body>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan sifat margin untuk memusatkan elemen div secara menegak dan mendatar. Apabila menetapkan nilai auto, penyemak imbas akan meletakkan elemen div di tengah halaman. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa kaedah ini hanya berfungsi untuk elemen dengan lebar dan ketinggian tetap.

Kaedah 3: Gunakan kedudukan mutlak

Kita boleh menggunakan kaedah kedudukan mutlak untuk memusatkan elemen div. Kita hanya perlu menetapkan elemen induknya kepada kedudukan relatif, kemudian tetapkan nilai sifat kiri dan atas unsur div, dan tetapkan sifat margin kepada auto untuk memusatkannya secara mendatar dan menegak. Contohnya:

<style>
  .container {
    position: relative;
    height: 300px;
    border: 1px solid black;
  }
  .content {
    position: absolute;
    width: 50%;
    height: 50%;
    left: 25%;
    top: 25%;
    margin: auto;
    background-color: lightgray;
  }
</style>
<body>
  <div class="container">
    <div class="content">居中显示</div>
  </div>
</body>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan gabungan kedudukan relatif dan mutlak. Tetapkan elemen induk kepada kedudukan relatif dan tengahkan elemen anak secara menegak dan mendatar menggunakan sifat kiri, atas dan jidar.

Kaedah 4: Gunakan paparan: atribut flex

Dalam CSS3, atribut baharu yang sangat menarik diperkenalkan: display: flex Atribut ini boleh membantu kami mencapai reka letak yang sangat mudah. Menggunakan sifat ini kita boleh memusatkan elemen kanak-kanak secara mendatar dan menegak dalam bekas yang sama. Contohnya:

<style>
  .container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 150px;
    border: 1px solid black;
  }
  .content {
    background-color: lightgray;
  }
</style>
<body>
  <div class="container">
    <div class="content">居中显示</div>
  </div>
</body>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan paparan atribut: flex untuk menetapkan bekas elemen kepada bekas fleksibel. Kemudian gunakan sifat align-item: center and justify-content: center untuk memusatkan elemen kanak-kanak secara mendatar dan menegak.

Kesimpulan

Dalam CSS, kita boleh memusatkan elemen div secara mendatar dan menegak dalam halaman web dengan menggunakan penjajaran teks, jidar, kedudukan mutlak atau sifat Flexbox. Setiap kaedah mempunyai kelebihan, kelemahan dan senario yang boleh digunakan. Pilih kaedah yang sesuai mengikut keperluan sebenar.

Jika tiada keperluan khas, adalah disyorkan untuk menggunakan kaedah keempat - menggunakan paparan: atribut flex Ia adalah yang paling mudah digunakan dan berfungsi dengan baik dalam kebanyakan penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk memusatkan div dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!