CSS如何垂直對齊我的文字和文字顏色

enter image description here

這是輸出我想

enter image description here

我的編碼：

.buttons{ 
background-image:url("SlicingImage/button_unselect.png"); 
margin: none; 
height: 53px; 
width: 180px; 
text-transform:uppercase; 
text-align:center; 
position:relative; 
vertical-align:bottom; 
}

HTML：

<li class="buttons">home</li>

但什麼都沒有改變:(

來源

2013-11-28 Aldin

使用的line-height根據您的按鈕高度 –

背景圖片的外觀和位置看起來不同，當按鈕被激活 – grimmus

一般提示：如果它只是一個鏈接，而不是一個段落，總是給line-height等於DIV高度在中間

垂直對齊文本在此處添加line-height:53px;你的課

來源

2013-11-28 09:26:58 NoobEditor

還行吧作品！謝謝！ – Aldin

你可能也想接受這個答案！ :) – NoobEditor

同意應被接受爲正確答案 – Doidgey

Vertical-align: bottom;只適用於像Table-cell或Table-Row

表的屬性

所以：

.buttons{ 
    background-image:url("SlicingImage/button_unselect.png"); 
    margin: 0; 
    height: 53px; 
    width: 180px; 
    text-transform:uppercase; 
    text-align:center; 
    position:relative; 
    vertical-align:bottom; 
    display: table-cell 
}

你需要玩這個;這裏一個關於它的解釋：http://www.onenaught.com/posts/201/

來源

2013-11-28 09:30:11 MikaldL

試試這個：

.buttons{ 
background-image:url("SlicingImage/button_unselect.png"); 
margin: none; 
/*height: 53px; 
width: 180px;*/ 
padding: 30px 30px; 
text-transform:uppercase; 
text-align:center; 
position:relative; 
vertical-align:bottom; 
}

來源

2013-11-28 09:31:26 HICURIN

垂直對齊不象是工作爲了什麼傻冒試圖做的。

您需要使用行高或填充來解決此問題。

我會嘗試的line-height第一

.buttons { line-height: 100px; }

，也拆除高度：從您的代碼53px。但相應地調整行高。

或者你也可以嘗試

.buttons { padding-top: 16px; }

，並相應地調整

來源

2013-11-28 09:31:29 CRABOLO

CSS如何垂直對齊我的文字和文字顏色

回答

相關問題