li里面的CSS垂直對齊文本

Question

我正在顯示從<li>標簽生成的具有固定高度和寬度的行數。 現在我需要在垂直中心對齊文本。 CSS vertical-align沒有影響，也許我錯過了什么？

我不是在尋找使用（邊距，填充，行高）的技巧，這些都行不通，因為有些文本很長並且會分成兩行。

請找到實際代碼：

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

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>

Answer 1

使用display: table定義父級，使用vertical-align: middle和display: table-cell定義元素本身。

Answer 2

line-height是您垂直對齊文本的方式。 這是非常標准的，我不認為它是“黑客”。 只需在你的ul.catBlock li添加line-height: 100px就可以了。

在這種情況下，您可能必須將其添加到ul.catBlock li a替代，因為里面所有的文字li也是一個內部a 。 我發現當你這樣做時會發生一些奇怪的事情，所以試試兩個並看看哪個有效。

Answer 3

令人驚訝（或不）， vertical-align工具實際上最適合這項工作。 最重要的是，不需要Javascript。

在下面的例子中，我定位outer體內的中產階級，和inner類在中間outer類。

預覽： 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; }

垂直對齊通過對齊彼此相鄰的元素的中心來工作。 將vertical-align應用於單個元素絕對沒有任何意義。 如果添加第二個沒有寬度但是容器高度的元素，則單個元素將使用此無寬度元素移動到垂直居中，從而垂直居中。 唯一的要求是將兩個元素都設置為內聯（或內聯塊），並將其vertical-align屬性設置為vertical-align: middle 。

注意：您可能會在下面的代碼中注意到我的<span>標記和<div>標記正在觸及。 因為它們都是內聯元素，所以空格實際上會在無寬度元素和div之間添加一個空格，因此請務必將其保留。

Answer 4

將來，這個問題將由flexbox解決。 目前瀏覽器支持很慘淡，但在所有當前瀏覽器中都支持這種或那種形式。

瀏覽器支持： 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背景： http ：//css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

無論多少年后這種反應可能是，任何遇到這種情況的人都可能只是想嘗試一下

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

瀏覽器對flexbox的支持比@scottjoudry在上面發布他的響應要好得多，但是如果你試圖支持更舊的瀏覽器，你可能仍然想要考慮前綴或其他選項。 caniuse：flex

Answer 6

除了Asaf的回答沒有提供任何代碼或任何示例，這里沒有提供完美的答案，所以我想貢獻我的...

為了使vertical-align: middle; 工作，你需要使用display: table; 為你的ul元素和display: table-cell; 對於li元素，你可以使用vertical-align: middle; 對於li元素。

您不需要提供任何明確的margins ， paddings以使文本垂直居中。

演示

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

Answer 7

如下所述： https ： //css-tricks.com/centering-in-the-unknown/ 。

正如在實際測試中所測試的那樣，最可靠而又優雅的解決方案是將輔助內聯元素作為第一個子元素插入到<li />元素中，其高度應設置為100％（其父級的高度， <li /> ），並將其vertical-align設置為middle。 要實現這一點，你可以放一個<span /> ，但最方便的方法是使用li:after偽類。

截圖：

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

Answer 8

試試這個解決方案吧

在大多數情況下效果最佳

你可能不得不使用div而不是li

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

Answer 9

垂直對齊中間的簡單解決方案......對我而言，它就像一個魅力

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