Bagaimana untuk menetapkan penjajaran pusat teks dalam css

Kaedah: 1. Gunakan "text-align:center" atau "margin:0 auto" untuk menetapkan penjajaran tengah mendatar; 2. Gunakan "line-height:value" atau "display:table-cell;vertical - align:middle" menetapkan penjajaran tengah menegak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

1. Pemusatan mendatar:

(1). Jika elemen set ialah teks, gambar, dsb.

elemen sebaris,

tetapkan text-align:center dalam elemen induk untuk mencapai pemusatan mendatar elemen sebaris Tetapkan paparan elemen anak kepada sekatan sebaris, supaya elemen anak menjadi elemen sebaris

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

(2) Elemen blok dipusatkan secara mendatar (Lebar ditentukan)

Apabila elemen yang ditetapkan ialah

elemen tahap blok lebar tetap

, menggunakan penjajaran teks: tengah tidak akan berfungsi. Pemusatan boleh dicapai dengan menetapkan nilai "margin kiri dan kanan" kepada "auto".

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

.child{
  width: 200px;
  margin: 0 auto;
}

(3)

Pemusatan mendatar bagi elemen blok (lebar tidak tentu)
berfungsi dalam amalan Kami akan menghadapi keperluan untuk menetapkan pusat untuk "elemen tahap blok lebar boleh ubah", seperti navigasi halaman pada halaman web Oleh kerana bilangan halaman tidak pasti, kami tidak boleh mengehadkan kefleksibelannya dengan menetapkan lebar.

Anda boleh tetapkan terus text-align:center kepada elemen peringkat blok dengan lebar berubah-ubah untuk mencapai ini, atau anda boleh menambah text-align:center pada elemen induk untuk mencapai kesan pemusatan.

Apabila lebar elemen peringkat blok lebar boleh ubah tidak menduduki satu baris, anda boleh menetapkan paparan kepada jenis sebaris atau blok sebaris (ditetapkan kepada paparan elemen sebaris atau elemen blok sebaris)

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

2. Pemusatan menegak:

Sama seperti pemusatan mendatar, di sini kita ingin bercakap tentang menegak pemusatan. Mula-mula tetapkan dua syarat iaitu

Elemen induk ialah bekas kotak dan ketinggian telah ditetapkan

Senario 1: Kanak-kanak elemen ialah elemen sebaris dan ketinggian disokong oleh kandungannya

Dalam kes ini, anda perlu memusatkan elemen anak secara menegak dengan menetapkan ketinggian garis elemen induk kepada ketinggiannya

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

Senario 2:

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

Elemen kanak-kanak ialah elemen peringkat blok tetapi ketinggian elemen kanak-kanak tidak ditetapkan

Dalam hal ini kes, ketinggian elemen kanak-kanak sebenarnya tidak diketahui, dan padding atau margin tidak boleh dikira untuk diselaraskan, tetapi masih terdapat beberapa penyelesaian. Diselesaikan dengan menetapkan paparan:table-cell;vertical-align:tengah kepada elemen induk

<div class="wrap">
    <div class="non-height ">11111</div>
</div>

Hasil

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

Senario 3: Elemen kanak-kanak ialah elemen peringkat blok dan ketinggian telah ditetapkan

Kira margin-atas atau margin-bawah elemen kanak-kanak dan kaedah pengiraan ialah induk (ketinggian elemen-ketinggian elemen kanak-kanak)/2

<div class="wrap ">
    <div class="div1">111111</div>
</div>

Hasil

.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }

Tutorial yang disyorkan: "

Tutorial Video CSS

"

Atas ialah kandungan terperinci Bagaimana untuk menetapkan penjajaran pusat teks dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!