Bagaimana untuk menyelaraskan elemen blok di tengah?-tutorial css-php.cn

Bagaimana untuk menyelaraskan elemen blok di tengah?

WBOY

Lepaskan： 2023-09-05 18:13:02

ke hadapan

1326 orang telah melayarinya

Bagaimana untuk menyelaraskan elemen blok di tengah?

Harta jidar dalam CSS boleh digunakan untuk memusatkan elemen blok (seperti div) secara mendatar. Kita boleh menetapkan lebar elemen, yang menghalang bekas daripada regangan. Elemen blok menduduki barisan penuh ruang, yang memaksa elemen lain untuk menduduki baris seterusnya kerana elemen blok memiliki 100% bekas.

Selaraskan tengah elemen blok

Sebarang elemen pada halaman web yang memulakan baris baharu dianggap sebagai elemen peringkat blok. Contohnya, tag tajuk, div, dsb.

Elemen blok ini merangkumi keseluruhan lebar halaman web. Katakan kami mempunyai elemen pada halaman web kami yang mengambil hanya 10% daripada halaman web, tetapi jika ia adalah elemen blok, ia akan mengambil 100% daripada lebar itu sendiri.

Kami boleh menukar atribut paparan mana-mana elemen tertentu dengan menetapkan nilai kepada atribut blok.

Syntax

Mari kita lihat sifat paparan -

display: value;

Salin selepas log masuk

Di atas ialah sintaks atribut paparan, yang boleh digunakan untuk menentukan penampilan elemen tertentu pada halaman web.

Sifat margin

Sekarang kita tahu bagaimana elemen blok berkelakuan, kita akan menggunakan sifat margin untuk menjajarkan elemen secara mendatar.

Atribut

margin akan mengawal kedudukan elemen blok. Kami akan menggunakan sifat ini dengan cara elemen dipusatkan, kerana jidar mengawal elemen dalam kedua-dua satah mendatardan menegak.

Tatabahasa

Mari kita lihat sintaks sifat margin -

margin: value;

Salin selepas log masuk

Diberikan di sini ialah sintaks atribut margin dan margin hendaklah ditentukan dari kiri ke kanan supaya elemen blok dipusatkan. Nilai auto boleh digunakan untuk menetapkan margin supaya elemen blok dipusatkan secara automatik.

NOTA - Terdapat penjajaran teks atribut dan pusat nilainya. Sifat ini tidak boleh digunakan dengan kaedah ini kerana ia digunakan untuk memusatkan elemen bukan sekat seperti perenggan, teg span, dsb.

Contoh

Untuk lebih memahami kefungsian sifat ini, mari lihat contoh di mana kita menambahkan beberapa pengepala dan div dengan margin ditetapkan kepada auto dalam bahagian sifat CSS dan kemudian menjajarkannya dengan dua bahagian dalam Blok terpaut bergerak bersama. Warna div yang berbeza memberitahu kami tentang paparan yang berbeza, seperti blok sebaris, dsb.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of text alignment to the center</title>
   <style>
      *{
         background-color:black;
      }
      .para {
         color:white;
         text-align: center;
      }
      .testinline { 
         padding: 10px; 
         border: 2px solid blue; 
      } 
      h1 {
         font-size: 35px;
         color: white;
         width: fit-content;
         margin: auto;
      }
      .container {
         background-color: lightblue;  
         margin: auto;
         border:  solid red 1px; 
         padding: 15px 10px; 
         text-align: center; 
         width: fit-content;
      }
      .good-night {
         padding: 10px;
         border: 2px solid blue;
         color: white;
         display: inline-block;
      }
      .good-morning {
          padding: 10px;
          text-align: center;
          color: white;
      }
   </style>
</head>
<body>
   <h1>Hi, this an example</h1>
   <p class="para">We are aligning the block elements to the text.</p>
   <h1>Welcome</h1>
   <div class="container">
      How is your day Going
   </div>
   <div class="good-morning">
      <div style="display: inline-block" class="testinline">
         Good Morning
      </div>
      <div style="display: inline-block" class="testinline">
         Good Night
      </div>
   </div>
</body>
</html>

Salin selepas log masuk

Dalam output di atas, anda dapat melihat bahawa tajuk dan elemen div diputar bersama dengan tag perenggan. Kami menggunakan atribut text-align untuk menjajarkan teg perenggan ke tengah dan atribut margin dan menetapkan nilainya kepada auto untuk menjajarkan elemen blok.

Contoh

Dalam program di bawah, kita akan mendapat imej dan elemen bukan blok di sebelah imej. Kami kemudian menetapkan paparan imej untuk menyekat, menetapkan marginnya kepada automatik, kemudian menyelaraskannya ke tengah dengan tajuk, dan menetapkan sifat paparan perenggan kepada blok sebaris.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example for text alignment </title>
   <style>
      h1 {
         margin: auto;
         width: 30%;
         font-size: 24px;
         margin-bottom: 8px;
         background-color: black;
         color: white;
      }
      .image{
         display: block;
         margin: auto;
      }
   </style>
</head>
<body>
   <h1>
      Example for setting the block element
   </h1>
   <img  class="image" src="https://www.tutorialspoint.com/images/logo.png" alt="Bagaimana untuk menyelaraskan elemen blok di tengah?" >
   <p style="display: inline-block;">
      Hi this is another example for aligning the block element to the centre.
   </p>
</body>
</html>

Salin selepas log masuk

Dalam output anda dapat melihat bahawa imej berada di tengah dan teks berada pada baris seterusnya, seperti yang kita mahukan.

Kesimpulan

Menjajarkan elemen blok ke tengah ialah cara terbaik untuk mencipta susun atur yang seimbang dan simetri. Anda boleh menjajarkan sebarang bilangan elemen dalam reka bentuk anda dengan cepat dan mudah dengan menggunakan penjajaran teks atau nilai automatik margin. Dengan sedikit latihan, anda akan dapat menggunakan teknik ini dengan yakin!

Atas ialah kandungan terperinci Bagaimana untuk menyelaraskan elemen blok di tengah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!