Ringkasan isu yang berkaitan dengan pemusatan mendatar dan menegak html_HTML/Xhtml_Web pengeluaran halaman-html tutorial-php.cn

Ringkasan isu yang berkaitan dengan pemusatan mendatar dan menegak html_HTML/Xhtml_Web pengeluaran halaman

WBOY

Lepaskan： 2016-05-16 16:36:19

asal

1600 orang telah melayarinya

Saya telah menghadapi banyak masalah pemusatan baru-baru ini, jadi saya mengambil sedikit masa untuk meringkaskannya di sini supaya ia mudah ditemui pada masa hadapan

1. Teks berpusat

Salin kod

Kod Sebagai berikut:

Saya di tengah...

.. teks ketinggian garis tinggi -center（ Hanya boleh memusatkan satu baris)
.wrap{
width:px;
height:px;
border:px solid red; > line-height: px;
}

ps:text-align:center hanya memusatkan elemen sebaris di bawah elemen
1.2paparan: sel jadual (Berbilang baris dengan ketinggian tetap berpusat)

Salin kodKod adalah seperti berikut:

.wrap{

lebar:px;
tinggi:px;
sempadan:px merah padat; sel;
menegak- jajar: tengah;
}

display:table-cell: Ia tidak berfungsi dalam ie67, lebih baik menggunakannya bersama-sama dengan display:table;

ie67: (Ia tidak akan digunakan pada masa hadapan. , tetapi mari letakkan di sini)

Kaedah 1: (Ketinggian tag em adalah sama dengan ketinggian induk, jadi rentang pemusatan dan em adalah bersamaan dengan rentang pemusatan pada induk)

Salin kod

kod adalah seperti berikut:

Saya di tengah... Saya di tengah... Saya di tengah... Saya di tengah...

.wrap{
lebar:px;
tinggi:px;
sempadan:px merah pepejal; tengah;
paparan:sebaris-blok;
lebar:px;
}
.bungkus em{
tinggi:%;
vertical-align:
paparan: blok sebaris;
}

Kaedah 2: (Dengan menambahkan teg induk yang diposisikan secara mutlak pada elemen anak, dan kemudian memadankan kedudukan relatif elemen anak untuk memusatkannya secara mendatar dan menegak)

Salin kod
Kod tersebut adalah seperti berikut:

< ;span class="span"> ; Saya di tengah... Saya di tengah... Saya di tengah... Saya di tengah tengah...

.wrap{

lebar:px;

tinggi:px;
sempadan: px merah pepejal;
paparan:jadual;
kedudukan:relatif;
limpahan: tersembunyi;
}
.bungkus .span{
paparan:sel-meja; -jajar: tengah;
jajaran teks: tengah;
*kedudukan: mutlak;
atas:%;
kiri:%;
}
.balut .span{
*kedudukan:relatif;
atas:-%;
kiri:- %;
}

1.3padding (padding dalam, tidak perlu dikatakan)

Salin kod

Kod adalah seperti berikut :

.wrap{

width:px; border:px solid red; padding:px ; }

2. Elemen berpusat

Salin kod Kod adalah seperti berikut :

2.1kedudukan:margin negatif mutlak (lebar dan tinggi mesti tersedia untuk mengira margin)

Salin kod
Kodnya adalah seperti berikut:

.wrap{
lebar:px;
tinggi:px;
kedudukan: mutlak;
kiri:%; :-px;
jidar-kiri:-px;
jidar:px merah pepejal;
}
.span pembalut{
lebar:px; > > latar belakang:merah;
kedudukan: mutlak;
atas:%;
kiri:%;
margin-atas:-px; }

ps: CSS melaksanakan pemusatan mendatar dan pemusatan menegak DIV

Salin kod

kod Seperti berikut:

> Tunjuk cara dalam talian berpusat menegak DIVCSS5 #utama {

lebar: 400px; ;

kiri:50%;

atas: 50%;
/*komen css: Untuk memudahkan tangkapan skrin, bungkus kod CSS*/

utama" >DIV dipusatkan secara mendatar dan menegak ke atas dan ke bawahDIVCSS5

< ;/html>

Pengenalan kepada prinsip pemusatan mendatar dan menegak

Kedudukan kedudukan mutlak:mutlak digunakan di sini Gunakan kiri dan atas untuk menetapkan jarak objek ke atas dan kiri kepada 50%, tetapi jika ia ditetapkan kepada 50%, kotak itu sebenarnya Kesan pemusatan tidak dicapai, jadi margin-left:-200px;margin-top:-100px. Caranya di sini ialah nilai margin-left ialah separuh lebar, dan nilai margin-top juga separuh ketinggian objek Pada masa yang sama, set adalah negatif, dengan itu mencapai pemusatan mendatar dan menegak.