Teks perataan vertikal CSS di dalam li

Saya menampilkan jumlah kotak dalam satu baris dengan tinggi dan lebar tetap, yang dihasilkan dari tag <li>. sekarang saya perlu meratakan teks di tengah vertikal. Perataan vertikal CSS tidak berdampak, mungkin saya melewatkan sesuatu ???

Saya tidak mencari trik menggunakan (margin, padding, line-height), ini tidak akan berfungsi karena beberapa teks panjang dan akan pecah menjadi dua baris.

Silakan temukan kode sebenarnya:

Kode CSS

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

Kode HTML

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

Definisikan induk dengan display: tabledan elemen itu sendiri dengan vertical-align: middledan display: table-cell.

line-heightadalah cara Anda meratakan teks secara vertikal. Ini cukup standar dan saya tidak menganggapnya sebagai "retasan". Tambahkan saja line-height: 100pxke Anda ul.catBlock lidan itu akan baik-baik saja.

Dalam hal ini Anda mungkin harus menambahkannya ul.catBlock li akarena semua teks di dalam lijuga ada di dalam file a. Saya telah melihat beberapa hal aneh terjadi ketika Anda melakukan ini, jadi cobalah keduanya dan lihat mana yang berhasil.

Betapa pun terlambatnya tanggapan ini selama bertahun-tahun, siapa pun yang menemukan ini mungkin hanya ingin mencoba

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Dukungan browser untuk flexbox jauh lebih baik daripada saat @scottjoudry memposting tanggapannya di atas, tetapi Anda mungkin masih ingin mempertimbangkan untuk memberi awalan atau opsi lain jika Anda mencoba mendukung browser yang jauh lebih lama. caniuse: flex

Anehnya (atau tidak), vertical-alignalat tersebut benar-benar berfungsi paling baik untuk pekerjaan ini. Yang terbaik dari semuanya, tidak diperlukan Javascript.

Dalam contoh berikut, saya memposisikan outerkelas di tengah tubuh, dan innerkelas di tengahouter kelas.

Pratinjau: http://jsfiddle.net/tLkSV/513/

HTML:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

Perataan vertikal bekerja dengan menyelaraskan pusat elemen yang bersebelahan. Menerapkan perataan vertikal ke satu elemen sama sekali tidak berarti. Jika Anda menambahkan elemen kedua yang tidak memiliki lebar tetapi merupakan tinggi wadah, elemen tunggal Anda akan berpindah ke tengah vertikal dengan elemen tanpa lebar ini, sehingga memusatkannya secara vertikal. Satu-satunya persyaratan adalah Anda menyetel kedua elemen menjadi sebaris (atau blok sebaris), dan menyetel atribut perataan vertikal ke vertical-align: middle.

Catatan: Anda mungkin melihat dalam kode saya di bawah bahwa <span>tag dan tag saya <div>bersentuhan. Karena keduanya adalah elemen sebaris, spasi sebenarnya akan menambahkan spasi antara elemen tanpa lebar dan div Anda, jadi pastikan untuk membiarkannya.

Di masa mendatang, masalah ini akan diselesaikan dengan flexbox. Saat ini dukungan browser suram, tetapi didukung dalam satu bentuk atau lainnya di semua browser saat ini.

Dukungan browser: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Latar belakang di Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tidak ada jawaban sempurna yang diberikan di sini kecuali jawaban Asaf yang tidak memberikan kode atau contoh apa pun, jadi saya ingin berkontribusi milik saya ...

Untuk membuat vertical-align: middle;pekerjaan, Anda perlu menggunakan display: table;untuk ulelemen Anda dan display: table-cell;untuk lielemen dan daripada yang dapat Anda gunakan vertical-align: middle;untuk lielemen.

Anda tidak perlu memberikan eksplisit apa pun margins, paddingsuntuk membuat teks Anda vertikal di tengah.

Demo

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

Seperti yang dijelaskan di sini: https://css-tricks.com/centering-in-the-unknown/ .

Seperti yang diuji dalam praktik nyata, solusi yang paling andal namun elegan adalah memasukkan elemen sebaris asisten ke dalam <li />elemen sebagai anak pertama, yang tingginya harus disetel ke 100% (dari tinggi induknya, the <li />), dan vertical-aligndisetel ke tengah . Untuk mencapai ini, Anda dapat meletakkan <span />, tetapi cara yang paling nyaman adalah dengan menggunakan li:afterkelas pseudo.

Tangkapan layar:

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

Cobalah solusi ini

Berfungsi paling baik di sebagian besar kasus

Anda mungkin harus menggunakan div, bukan li untuk itu

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

Solusi sederhana untuk perataan vertikal tengah ... bagi saya itu berfungsi seperti pesona

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}