Terdapat empat cara untuk memusatkan bar navigasi dalam CSS: menggunakan Flexbox (menggunakan paparan: flex dan justify-content: center), menggunakan reka letak grid (menggunakan paparan: grid dan justify-item: center), menggunakan kedudukan mutlak (apply kedudukan: mutlak, kiri dan kanan: 50% dan ubah: terjemah(-50%, 0)), atau gunakan jidar untuk memusatkan secara automatik (gunakan jidar: 0 automatik).
Cara memusatkan bar navigasi menggunakan CSS
1 Menggunakan Flexbox
Flexbox ialah model reka letak yang membolehkan elemen disusun dalam satu baris atau lajur. Untuk memusatkan bar navigasi menggunakan Flexbox, ikut langkah berikut:
paparan: flex;
pada bekas bar navigasi. display: flex;
。justify-content
属性上应用 center
值。<code class="css">.nav-container { display: flex; justify-content: center; }</code>
2. 使用网格布局
网格布局允许将元素排列成表格状的网格。要使用网格布局将导航栏居中,请执行以下步骤:
display: grid;
。justify-items
属性上应用 center
值。<code class="css">.nav-container { display: grid; justify-items: center; }</code>
3. 使用绝对定位
绝对定位允许元素从其正常流中移除并相对于父容器定位。要使用绝对定位将导航栏居中,请执行以下步骤:
position: absolute;
。left
和 right
属性上应用 50%
值。transform
属性上应用 translate(-50%, 0);
。<code class="css">.nav-container { position: absolute; left: 50%; right: 50%; transform: translate(-50%, 0); }</code>
4. 使用 margin 自动居中
margin 属性允许在元素周围添加空白空间。要使用 margin 自动居中导航栏,请执行以下步骤:
margin: 0 auto;
center
pada atribut justify-content
. <code class="css">.nav-container { margin: 0 auto; }</code>
paparan: grid;
pada bekas bar navigasi. 🎜🎜Gunakan nilai center
pada atribut justify-item
. . Untuk memusatkan bar navigasi menggunakan kedudukan mutlak, ikuti langkah berikut: 🎜🎜🎜Gunakan position: absolute;
pada bekas bar navigasi. 🎜🎜Gunakan nilai 50%
pada atribut kiri
dan right
. 🎜🎜Gunakan terjemah(-50%, 0);
pada atribut transform
. 🎜🎜rrreee🎜🎜4. Autopusat menggunakan jidar 🎜🎜🎜 Sifat jidar membolehkan menambah ruang putih di sekeliling elemen. Untuk memusatkan bar navigasi secara automatik menggunakan margin, ikut langkah berikut: 🎜🎜🎜Gunakan margin: 0 auto;
pada bekas bar navigasi. 🎜🎜rrreeeAtas ialah kandungan terperinci Bagaimana untuk memusatkan bar navigasi dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!