Li içinde CSS dikey hizalama metni

<li> etiketlerinden oluşturulan sabit yükseklik ve genişlikte arka arkaya kutu sayısını görüntülüyorum. şimdi metni dikey merkeze hizalamam gerekiyor. CSS dikey hizalamasının hiçbir etkisi yoktur, belki bir şeyi kaçırıyorum ???

(Margin, padding, line-height) kullanarak hileler aramıyorum, bunlar çalışmayacak çünkü bazı metinler uzun ve iki satıra bölünecek.

Lütfen gerçek kodu bulun:

CSS kodu

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

HTML Kodu

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

İle ebeveyn tanımlayın display: tableve birlikte elemanı kendisi vertical-align: middleve display: table-cell.

line-heightmetni dikey olarak nasıl hizaladığınızdır. Oldukça standart ve ben bunu bir "hack" olarak görmüyorum. Sadece line-height: 100pxkendinize ekleyin ul.catBlock live iyi olacak.

Bu durumda ul.catBlock li a, içindeki tüm metin lide bir a. Bunu yaptığınızda bazı tuhaf şeyler olduğunu gördüm, bu yüzden ikisini de deneyin ve hangisinin işe yaradığını görün.

Ne kadar uzun yıllar geç olursa olsun, bu yanıtla karşılaşan herhangi biri sadece denemek isteyebilir

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

Flexbox için tarayıcı desteği, @scottjoudry yukarıdaki yanıtını yayınladığında olduğundan çok daha iyidir, ancak çok daha eski tarayıcıları desteklemeye çalışıyorsanız, yine de ön ek veya diğer seçenekleri düşünmek isteyebilirsiniz. caniuse: esnek

Şaşırtıcı bir şekilde (ya da değil), vertical-alignaraç aslında bu iş için en iyi sonucu verir. Hepsinden iyisi, Javascript gerekli değildir.

Aşağıdaki örnekte outersınıfı vücudun innerortasında, outersınıfı da sınıfın ortasında konumlandırıyorum .

Önizleme: 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; }

Dikey hizalama, yan yana olan öğelerin merkezlerini hizalayarak çalışır. Tek bir öğeye dikey hizalama uygulamak kesinlikle hiçbir şey yapmaz. Genişliği olmayan ancak kabın yüksekliği olan ikinci bir öğe eklerseniz, tek öğeniz bu genişliksiz öğeyle dikey olarak ortalanacak ve böylece dikey olarak ortalanacaktır. Tek gereksinim, her iki öğeyi de satır içi (veya satır içi blok) ve dikey hizalama özniteliklerini olarak ayarlamanızdır vertical-align: middle.

Not: Aşağıdaki kodumda <span>etiketimin ve <div>etiketimin birbirine dokunduğunu fark edebilirsiniz. Her ikisi de satır içi öğeler olduğundan, boşluk aslında genişliksiz öğe ile div öğeniz arasına bir boşluk ekleyecektir, bu nedenle boş bıraktığınızdan emin olun.

Gelecekte bu sorun flexbox ile çözülecektir. Şu anda tarayıcı desteği yetersiz, ancak mevcut tüm tarayıcılarda şu veya bu şekilde destekleniyor.

Tarayıcı desteği: 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;
}

Flexbox ile ilgili arka plan: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Burada hiçbir kod veya örnek sağlamayan Asaf'ın cevabı dışında mükemmel cevaplar yok, bu yüzden benimkine katkıda bulunmak istiyorum ...

Yapmak için Inorder vertical-align: middle;çalışmaları, kullanmak gerekir display: table;sizin için uleleman ve display: table-cell;için lielemanlar ve kullanabileceğiniz daha vertical-align: middle;için lielemanlar.

Herhangi açık sağlamak gerekmez margins, paddingsmetin dikey olarak orta yapmak.

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

Burada açıklandığı gibi: https://css-tricks.com/centering-in-the-unknown/ .

Gerçek uygulamada test edildiği gibi, en güvenilir ancak zarif çözüm, <li />1. çocuk olarak elemana yardımcı bir satır içi eleman eklemektir, bu eleman yüksekliği% 100'e (ebeveynin yüksekliğine göre, a <li />) ve vertical-alignorta olarak ayarlanmalıdır. . Bunu başarmak için a koyabilirsiniz <span />, ancak en uygun yol li:aftersözde sınıf kullanmaktır .

Ekran görüntüsü:

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

Bu çözümü bir deneyin

Çoğu durumda en iyi şekilde çalışır

Kullanmak gerekebilir div yerine li bunun için

.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>

Dikey hizalama orta için basit çözüm ... benim için bir cazibe gibi çalışıyor

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