錨定標記內的垂直對齊文本

一切正常，文本處於錨點的中間。整個ul標籤位於頁面中間，但這只是問題。當文本稍微長一些時，它會斷開，我的錨標記會上升，但我不確定是什麼問題。檢查它的生活和mojgolub（。）的COM錨定標記內的垂直對齊文本

enter image description here

HTML

<div id="speeddial-wrapper"> 
    <nav> 
    <ul> 
     <li> <a href="#" class="speeddial" id="s1">POPIS GOLUBOVA</a> </li> 
     <li> <a href="#" class="speeddial" id="s2">POPIS GOLUBOVA MALO VECI TEKST NEGO UOBICAJENO</a></li> 
     <li> <a href="#" class="speeddial" id="s3">POPIS GOLUBOVA></a></li> 
     <li> <a href="#" class="speeddial" id="s4">POPIS GOLUBOVA</a> </li> 
     <div style="clear:both; margin-top:25px;"></div> 
     <li> <a href="#" class="speeddial" id="s1">POPIS GOLUBOVA</a> </li> 
     <li> <a href="#" class="speeddial" id="s2">POPIS GOLUBOVA MALO VECI TEKST NEGO UOBICAJENO</a></li> 
     <li> <a href="#" class="speeddial" id="s3">POPIS GOLUBOVA></a></li> 
     <li> <a href="#" class="speeddial" id="s4">POPIS GOLUBOVA</a> </li> 
    </ul> 
    </nav> 
</div>

CSS

#speeddial-wrapper 
{ 
    width:90%; 
    margin:0 auto; 
    margin-top:30px; 
    text-align:center; 
} 

#speeddial-wrapper nav ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

#speeddial-wrapper nav ul li 
{ display:inline-table; 
} 

.speeddial 
{ 
    font-family:speeddialfont; 
    color:#FFFFFF; 
    text-align:center; 
    text-decoration:none; 

    height:200px; 
    width:200px; 
    border:7px solid #AEAEAE; 
    background-color:#49A655; 
    border-radius:5px; 

    display:table-cell; 
    vertical-align:middle; 

    margin-right:30px; 
    margin-bottom:30px; 
}

來源

2013-03-17 FosAvance

更改display

#speeddial-wrapper nav ul li 
{ 
    display:inline-table; 
}

到

#speeddial-wrapper nav ul li 
{ 
    display:inline-block; 
}

來源

2013-03-17 16:45:12 Bigood

我不能相信這是唯一的錯誤 – FosAvance 2013-03-17 21:10:49

添加此規則

#speeddial-wrapper nav ul li { vertical-align: middle; }

來源

2013-03-17 16:43:50 ryan

錨定標記內的垂直對齊文本

回答

相關問題