Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyelaraskan elemen blok di tengah?
Bagaimana untuk menyelaraskan elemen blok di tengah?
- WBOYke hadapan
- 2023-09-05 18:13:021304semak imbas
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;
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.
Atributmargin 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;
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>
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>
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!