4 cara berbeza untuk memusatkan elemen menggunakan CSS-tutorial css-php.cn

4 cara berbeza untuk memusatkan elemen menggunakan CSS

WBOY

Lepaskan： 2023-09-22 12:05:07

ke hadapan

1356 orang telah melayarinya

使用 CSS 将元素居中的 4 种不同方法

Apabila mereka bentuk halaman web atau dokumen, adalah penting untuk memastikan elemen seimbang secara visual dan diletakkan dengan betul. Tugas biasa dalam pembangunan web ialah memusatkan elemen dalam bekasnya. Walaupun ini mungkin kelihatan seperti tugas yang mudah, terdapat pelbagai cara untuk melakukannya menggunakan CSS. Dalam artikel ini, kami akan meneroka empat cara berbeza untuk memusatkan elemen menggunakan CSS.

Kami akan membincangkan teknik untuk menggunakan penjajaran teks, margin, Flexbox dan Grid CSS, serta membincangkan kebaikan dan keburukan setiap pendekatan. Sama ada anda baru dalam pembangunan web atau ingin meningkatkan kemahiran anda, menguasai teknik ini akan membantu anda membuat reka letak yang menarik secara visual dan seimbang untuk projek anda.

Gunakan sifat penjajaran teks

Sifat

CSS text-align digunakan untuk menjajarkan teks secara mendatar dalam elemen peringkat blok seperti perenggan atau tajuk. Sifat ini boleh menerima berbilang nilai, termasuk kiri, tengah, kanan dan justify.

Contoh

Berikut ialah contoh cara untuk memusatkan teks dalam elemen div menggunakan atribut text-align -

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         text-align: center;
      }
   </style>
</head>
<body>
   <div>
      <h1> Welcome to my website </h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit libero ac tellus posuere, a tristique nunc tincidunt. Sed et erat nec elit consectetur interdum ac ac eros. </p>
   </div>
</body>
</html>

Salin selepas log masuk

Sifat penjajaran teks ialah alat yang berguna dan berkuasa dalam CSS untuk mengawal penjajaran teks dalam elemen. Dengan menggunakan atribut ini, anda boleh menjadikan halaman web anda kelihatan lebih digilap dan profesional.

Digunakan untuk memastikan sifat logam

Sifat

CSS margin boleh digunakan untuk menjajarkan elemen di tengah dalam bekas induknya. Ini dicapai dengan menetapkan margin kiri dan kanan elemen kepada "auto".

Apabila jidar kiri dan kanan elemen ditetapkan kepada "auto", penyemak imbas secara automatik akan mengira jidar yang sama pada kedua-dua belah elemen, sekali gus memusatkan elemen dalam bekas induknya.

Contoh

Berikut ialah contoh cara menjajarkan elemen div ke tengah menggunakan atribut margin. Dalam contoh ini,

.center mentakrifkan lebar dan tinggi, dan sifat margin ditetapkan kepada 0 auto. Elemen div dipusatkan secara mendatar dalam bekas induknya. Tambahkan warna latar belakang pada elemen div untuk tontonan yang lebih mudah.
Adalah penting untuk ambil perhatian bahawa agar teknik margin: 0 auto berfungsi, elemen yang anda ingin tengahkan mesti mempunyai lebar yang ditentukan. Jika elemen tidak mempunyai lebar yang ditentukan, ia akan lalai kepada lebar penuh bekas induk dan tidak akan dipusatkan.
margin ialah alat berkuasa dalam CSS untuk mengawal jarak dan penjajaran elemen pada halaman web. Dengan menggunakan sifat ini, anda boleh menjajarkan elemen ke tengah, mencipta ruang putih antara elemen dan mengawal reka letak halaman.

<!DOCTYPE html>
<html>
<head>
   <style>
      .center {
         width: 300px;
         height: 200px;
         margin: 0 auto;
         background-color: #e5e5e5;
      }
   </style>
</head>
<body>
   <div class="center">
      <h1> Hello, World! </h1>
      <p> This is a centered div element. </p>
   </div>
</body>
</html>

Salin selepas log masuk

Menggunakan CSS Flexbox

Flexbox ialah model reka letak dalam CSS yang memudahkan untuk menjajarkan dan mengedarkan elemen dalam bekas. Ia ialah alat reka letak yang berkuasa dalam CSS yang boleh digunakan untuk mencapai banyak kesan reka letak yang berbeza, termasuk elemen penjajaran tengah.

Ia menyediakan cara yang fleksibel dan responsif untuk menyusun elemen pada halaman web, dan boleh digunakan bersama-sama dengan teknik reka letak lain seperti grid untuk mencipta reka letak yang kompleks.
Kita boleh menjajarkan elemen tengah dalam bekas menggunakan sifat seperti justify-content dan align-item.

Contoh

Berikut ialah contoh cara menjajarkan elemen div ke tengah menggunakan Flexbox. Dalam contoh ini, kelas .container ditakrifkan menggunakan atribut display: flex, yang menjadikannya bekas Flexbox.

Sifat

justify-content dan align-item ditetapkan kepada center untuk memusatkan elemen kanak-kanak secara menegak dan mendatar dalam bekas. Kelas .center mentakrifkan lebar dan ketinggian elemen berpusat dan menambah warna latar belakang untuk kejelasan visual.

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
      }
      .center {
         width: 300px;
         height: 200px;
         background-color: #e5e5e5;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="center">
         <h1> Hello, World! </h1>
         <p> This is a centered div element using Flexbox. </p>
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Gunakan Grid CSS

CSS Grid ialah sistem reka letak yang berkuasa dalam CSS yang memudahkan untuk membuat reka letak berbilang lajur yang kompleks. Salah satu faedah menggunakan CSS Grid ialah ia menjadikan elemen penjajaran tengah dalam bekas grid menjadi mudah.

Contoh

Berikut ialah contoh cara menjajarkan elemen div ke tengah menggunakan Grid CSS. Di sini, kelas .container ditakrifkan menggunakan sifat display: grid, yang menjadikannya bekas grid CSS.

tempat-item ditetapkan kepada tengah, yang memusatkan elemen kanak-kanak secara menegak dan mendatar dalam bekas grid. Kelas .center mentakrifkan lebar dan ketinggian elemen berpusat dan menambah warna latar belakang untuk kejelasan visual.
CSS Grid ialah sistem susun atur yang fleksibel dan berkuasa dalam CSS yang boleh digunakan untuk mencipta pelbagai reka letak, termasuk elemen sejajar tengah. Ia menyediakan cara yang mudah dan intuitif untuk mencipta reka letak dinamik responsif yang boleh menyesuaikan diri dengan saiz skrin dan jenis peranti yang berbeza.

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         display: grid;
         height: 100vh;
         place-items: center;
      }
      .center {
         width: 300px;
         height: 200px;
         background-color: #e5e5e5;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="center">
         <h1>Hello, World!</h1>
         <p>This is a centered div element using CSS Grid.</p>
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Ringkasnya, terdapat banyak cara untuk menyelaraskan elemen menggunakan CSS, termasuk sifat penjajaran teks,

teg, sifat jidar dan reka letak Grid dan Flexbox CSS. Bergantung pada keperluan dan pilihan anda, setiap kaedah boleh digunakan dalam situasi yang berbeza untuk mencipta reka bentuk yang menarik secara visual dan responsif.

Atas ialah kandungan terperinci 4 cara berbeza untuk memusatkan elemen menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!