在按鈕內定位文本

我有一些文本按鈕，上面有太多空間。是看起來是這樣的：在按鈕內定位文本

enter image description here

我如何定位文本有點偏高，使得它不會通過按鈕的邊框切片？

HTML：

<input type="button" value="a">

這裏是我的CSS迄今：

input[type="button"], input[type="submit"] { 
    min-width: 40px; 
    height: 25px; 
    font-size: 30px; 
    color: #ffffff; 
    margin-right: 10px; 
    padding: 0px; 
}

的line-height屬性不會改變任何東西，即使使用的!important。

來源

2013-10-30 Juuro

但行高是你想要的。 ;）使用比您的字體大小更小的值。 – kleinfreund

我希望lineheight是我想要的，但我希望字體大小這麼大，按鈕這麼小。有沒有辦法將文本從按鈕中移除？ – Juuro

您可以使用'font-size：30px;'然後例如'line-height：20px;'。玩一下。這應該工作。 – kleinfreund

設置固定的高度將關閉對齊。設置字體大小足以讓div自動調整大小，文字將居中。如果你真的想保持固定的寬度和按鈕的高度，文字，那麼你可以不喜歡下面的字體大小

input[type="button"], input[type="submit"] { 
    min-width: 40px; 
    font-size: 30px; 
    color: #ffffff; 
    margin-right: 10px; 
}

來源

2013-10-30 18:49:05 user2938649

：試試這個新的CSS。這是將文本放在不同的div，所以你可以將它放在按鈕的頂部。如果按鈕的位置是：relative，則文本div的位置是絕對的，並且HTML的結構使得文本div位於按鈕標籤內，那麼它將很好地分層。另外，當完成這種方式時，文本將隨着按鈕移動，並且不會被移位（如果說您給按鈕一個邊距：100px）。

<button value=""> 
    <div id="buttonText">a</div> 
</button> 

Here is my CSS so far: 

<style> 
button { 
    width: 40px; 
    height: 25px; 
    margin-right: 10px; 
    position: relative; 
} 

#buttonText 
{ 
    font-size: 30px; 
    position: absolute; 
    top: -9px; 
    left: 9px; 
    color: #FFF; 
} 
</style>

來源

2013-10-30 20:12:11 user2938649

在按鈕內定位文本

回答

相關問題