Bagaimana untuk memusatkan
menggunakan sifat Flexbox CSS?

PHPzke hadapan: 2023-09-03 12:01:021393semak imbas

如何使用 CSS 的 Flexbox 属性使 <div> 居中？

Kita boleh memusatkan dc6dce4a544fdca2df29d5ac0ea9906b dalam css menggunakan justify-content property dan align-item property of flexbox. Mereka popular kerana ia responsif dan mudah digunakan. Dalam artikel ini, kita akan belajar bagaimana untuk memusatkan dc6dce4a544fdca2df29d5ac0ea9906b menggunakan sifat Flexbox.

使用 align-item 和 justify-content 属性

使用flexbox的最流行的居中div的方法是结合justify-content和align-item属性。

justify-content属性会水平居中对齐div。
align-items属性将div垂直居中对齐。

Jika anda ingin menjajarkan pusat hanya dalam satu arah, iaitu sama ada secara menegak atau mendatar, kami harus menggunakan satu sahaja antara sifat yang kami nyatakan.

Gunakan item jajar dan kandungan justify untuk menjajarkan anak secara mendatar dan menegak.

Contoh

<!DOCTYPE html>
<html lang="en">
<style>
   .parent{
      border: 2px solid green;
      height:30vh;
      width:30vw;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: orange;
   }
   .child{
      border: 2px solid red;
      height:10vh;
      width:10vw;
      background-color: yellow;
   }
</style>
</head>
<body>
   <div class="parent">
      <div class="child">
         This is the child element.
      </div>
   </div>
</body>
</html>

Dalam kod, elemen induk ialah kotak oren bersempadan hijau dengan ketinggian 30% daripada ketinggian port pandangan dan lebar 30% daripada lebar port pandangan. Induk dipusatkan secara mendatar dan menegak dengan bantuan " paparan: flex", "arah-flex: baris", "justify-content: center" dan "align-item: center."
要使用align-item和justify-content，我们首先需要使用display属性声明元素为flexbox。子元素是一的1元素是一一家0%、宽度为视口宽度的10%的带有红色边框的黄色盒子，放置在父元素内部。

结论

在本文中，我们了解了如何使用CSS的flexbox属性来居中一个dc6dce4a544fdca2df29d5ac0ea9906b。我们只需要flex使的flexbox属性来居中一个.就可以实现相同的效果。

Atas ialah kandungan terperinci Bagaimana untuk memusatkan

menggunakan sifat Flexbox CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css if using Property this display viewport flex

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Apakah aksara yang sah dalam nama/pemilih kelas CSS?Artikel seterusnya：Apakah aksara yang sah dalam nama/pemilih kelas CSS?

Artikel berkaitan

Lihat lagi