Penyelesaian untuk menyelaraskan kandungan bar navigasi CSS dengan logo

Artikel ini bertujuan untuk menyelesaikan masalah yang kandungan dalam bar navigasi CSS tidak dapat diselaraskan dengan logo. Dengan menetapkan elemen logo ke kedudukan mutlak dan menggunakan transformasi: Translate (-50%) atribut untuk mencapai pusat menegak, dan bersempena dengan penyesuaian gaya bar navigasi, kandungan bar navigasi dan logo akhirnya diselaraskan dengan sempurna. Artikel ini menyediakan contoh dan langkah -langkah kod terperinci untuk membantu pemaju dengan mudah menyelesaikan masalah ini.

Dalam reka bentuk web, bar navigasi adalah elemen penting yang membimbing pengguna melalui laman web dan memberikan maklumat kritikal. Bar navigasi yang indah dan berfungsi sepenuhnya perlu memastikan kandungannya selaras dengan logo untuk keseimbangan visual. Walau bagaimanapun, disebabkan oleh kerumitan susun atur CSS, kadang -kadang sukar untuk mencapai matlamat ini. Artikel ini akan menyediakan penyelesaian yang mudah dan berkesan untuk membantu pemaju dengan mudah menyelesaikan masalah menyelaraskan kandungan bar navigasi dengan logo.

Penyelesaian: Gunakan kedudukan mutlak dan mengubah sifat

Idea utama penyelesaian ini adalah untuk menetapkan elemen logo untuk kedudukan mutlak dan menggunakan atribut transformasi CSS untuk mencapai pusat menegak. Langkah -langkah tertentu adalah seperti berikut:

1. Tetapkan kaedah kedudukan elemen logo ke kedudukan mutlak

   Dalam CSS, tetapkan sifat kedudukan kelas .logo kepada mutlak. Ini akan melepaskan elemen logo dari aliran dokumen, yang membolehkan kita mengawal kedudukannya dengan tepat.

    .logo {
     Kedudukan: Mutlak;
     /* Gaya lain*/
   }

2. Logo berpusat menegak

   Gunakan atas: 50%; Poskan pinggir atas logo ke pusat menegak elemen induknya (iaitu bar navigasi). Kemudian, gunakan Transform: Translatey (-50%); Untuk menggerakkan logo ke atas dengan separuh ketinggiannya sendiri. Kedua -dua sifat ini digunakan dalam kombinasi untuk mencapai pusat menegak yang sempurna.

    .logo {
     Kedudukan: Mutlak;
     Atas: 50%;
     Transform: Translatey (-50%);
     /* Gaya lain*/
   }

3. Laraskan gaya bar navigasi

   Untuk memastikan bahawa kandungan bar navigasi diselaraskan dengan logo, anda mungkin perlu menyesuaikan atribut teks-selat bar navigasi. Secara amnya, menetapkan teks-selat ke kanan membolehkan pautan bar navigasi diselaraskan ke kanan, dengan itu mengimbangi logo di sebelah kiri. Di samping itu, pastikan harta kedudukan bar navigasi ditetapkan kepada relatif, yang penting untuk elemen logo yang benar -benar diposisikan.

    .topnav {
     Kedudukan: Relatif;
     Teks-Align: Betul;
     /* Gaya lain*/
   }

Contoh kod CSS lengkap:

 @font-face {
  Font-Family: 'Leander';
  src: url (/fonts/leander.ttf);
}

badan {
  Margin: 0;
  latar belakang warna: #262626;
}

.topnav {
  Kedudukan: Relatif;
  latar belakang warna: #141414;
  Limpahan: Tersembunyi;
  Teks-Align: Betul;
  Padding: 14px 20px;
  box-shadow: 0px 5px 10px hitam;
}

.topnav a {
  Kedudukan: Relatif;
  Warna: Putih;
  Teks-Align: Pusat;
  Padding: 30px 16px;
  Teks-penyerapan: Tiada;
  saiz font: 17px;
}

.logo {
  Kedudukan: Mutlak;
  Atas: 50%; /*Penting untuk elemen berpusat menegak*/
  Transform: Translatey (-50%); /*berpusat secara menegak*/
  Warna: Putih;
  font-family: 'leander', sans-serif;
  Teks-Align: Kiri;
  Terapung: Kiri;
}

Contoh kod HTML:

 


  <meta charset="utf-8">
  <meta http-equiv="x-ua-comple content" content="ie = edge">
  <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
  <tirly> Arclight Web Development 
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
  <link rel="stylesheet" href="app.css">



  <div class="TopNav">
    <div class="logo">
      <span id="a"> a </span>
      <span id="r"> r </span>
      <span id="c"> c </span>
      <span id="l"> l </span>
      <span id="i"> i </span>
      <span id="g"> g </span>
      <span id="h"> h </span>
      <span id="t"> t </span>
    </div>
    <a class="aktif" href="#home"> home </a>
    <a href="#projek"> projek </a>
    <a href="#about"> Temui dev </a>
    <a href="#contact"> Hubungi </a>
  </div>

  <script src="app.js"> </script>


</tirly>

Nota:

• Pastikan ketinggian elemen induk (bar navigasi) jelas ditakrifkan atau boleh dikira secara automatik. Jika tidak, atas: 50% mungkin tidak berfungsi dengan betul.
• Bergantung pada keperluan reka bentuk tertentu, gaya lain dari elemen logo mungkin perlu diselaraskan, seperti saiz fon, warna, dan jarak.
• Uji pada pelayar dan peranti yang berbeza untuk memastikan penjajaran yang konsisten.

Meringkaskan:

Dengan menggunakan kedudukan mutlak dan mengubah sifat, mudah untuk menyelesaikan masalah yang kandungan dalam bar navigasi CSS tidak dapat diselaraskan dengan logo. Kaedah ini mudah dan berkesan, dan mempunyai keserasian penyemak imbas yang baik. Saya harap penyelesaian yang disediakan dalam artikel ini dapat membantu pemaju membina bar navigasi yang indah dan berfungsi.

Atas ialah kandungan terperinci Penyelesaian untuk menyelaraskan kandungan bar navigasi CSS dengan logo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!