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.

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>

Apabila elemen yang ditetapkan ialah

, 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;
}

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;}

Elemen induk ialah bekas kotak dan ketinggian telah ditetapkan

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>

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

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>

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

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>

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

Tutorial yang disyorkan: "

"

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!