如何使用CSS將文本垂直居中在LI內的錨點中？

這個問題的變化已經被問了很多次。垂直居中CSS是一個挑戰。如何使用CSS將文本垂直居中在LI內的錨點中？

我有一個特定的場景，處理水平顯示的列表。標記是這樣的：

<ul id='ul1' class='c'> 
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li> 
    <li><a href='javascript:void(0)'>Fobble</a></li> 
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li> 
    </ul>

的風格是這樣的：

ul.c { 
    height:52px; 
    text-align:center; 
    } 
    ul li a { 
    float:left; 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    line-height:1em; 
    width:100px; 
    } 
    ul li a:hover { 
    background: #CCC; 
    } 
    ul li { 
    height:52px; 
    display:inline-block; 
    }

結果列表如下：

enter image description here

但我想所有的箱子是高度相同，我希望文本在每個框中垂直居中。我可以通過爲A元素添加height樣式來設置箱子高度。結果是這樣的：

enter image description here

...這是接近我想要的，但垂直居中沒有發生。

我可以設置line-height爲正文，as suggested in this post，做垂直居中。我甚至可以爲不同的A元素選擇不同的值line-height，如果我知道哪些元素將獲得多行文本。但我不知道哪些需要多行。

當A元素中的某些元素包含文本時，我怎樣才能讓它居中？

來源

2011-09-30 Cheeso

使用令人恐懼的表！ –

你可以使用display:table等一起vertical-align:middle

ul.c { 
    text-align:center; 
    display:table; 
} 

ul li { 
    float:left;  
} 

ul li a { 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    width:100px; 
    height:52px; 
    display:table-cell; 
    vertical-align:middle; 
} 

ul li a:hover { 
    background: #CCC; 
}

例子：http://jsfiddle.net/kf52n/2/

來源

2011-09-30 03:58:15

我想不出在CSS中這樣做的方法。我發現我可以用Javascript來做我需要的，在運行時將padding-top和padding-bottom設置爲適當的值。該技術是測量A元素的「自然」高度，然後設置填充以使A元素垂直居中。

這裏是必要的js代碼：

function setHeightIntelligently(ulElement) { 
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight, 
     naturalHeight, pad; 
    items = ulElement.children; 
    for(i=0, L1 = items.length;i<L1;i++){ 
     if (items[i].tagName.toUpperCase() == 'LI') { 
     anchor = items[i].children[0]; 
     naturalHeight = anchor.clientHeight; 
     pad = (availableHeight - naturalHeight)/2; 
     anchor.style.paddingTop= pad+'px'; 
     anchor.style.paddingBottom= pad+'px'; 
     } 
    } 
    } 

    function init() { 
    var element = document.getElementById('ul1'); 
    setHeightIntelligently(element); 
    }

在CSS，必須沒有明確設置高度或填充的A元素。這樣做會導致「自然」高度不是我們所需要的。

的結果是這樣的：

enter image description here

要看到它的行動，go here。

來源

2011-09-30 03:08:48 Cheeso

幹得好！你有jQuery的等價物嗎？ – Mike6679

-1

在您設定的高度，行高爲相同的CSS

。然後你會得到一個矩形框。

但你仍然看到在底部空間的原因是由於填充

在填充添加兩個值增加了頂部和底部填充

邊距：頂底;

，因爲它是2和12，你看到了巨大的空間。

試試這個

height: 52px; 
line-height:52px; 
padding: 6px 6px; // here you have to tweak and see the output 
vertical-align:center;

讓我知道這是工作

來源

2011-09-30 04:04:43 carrieat

老問題，但答案現在可以Flexbox的更新。

a { 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

來源

2017-05-11 12:52:05 andydavies

非常好，正是我在找的東西。謝謝。 – Christof

如何使用CSS將文本垂直居中在LI內的錨點中？

回答

相關問題