無法對齊按鈕

Question

我正在製作一個非常簡單的用戶界面，並且我有一些具有不同數量文本的按鈕。我需要按鈕來設置高度和寬度。問題是，當button上的文字包裹時，該按鈕停止與第一個對齊。

這是我能想到的最簡單的例子。

button { 
 
    height: 45px; 
 
    width: 120px; 
 
}

<button>Short text</button> 
 
<button>Text long enough to use two lines</button>

如果從CSS中刪除height或width，他們再次對準，但大小不同。我試圖把它們放在一個容器div和玩height，margin，padding和東西，但我無法修復它。

問題：有沒有另外一種方法呢？

Answer 1

添加vertical-align:top你的CSS規則：

button { 
 
    height: 45px; 
 
    width: 120px; 
 
    vertical-align:top; 
 
}

<button>Short text</button> 
 
<button>Text long enough to use two lines</button>

默認垂直對齊baseline，所以你想改變這個頂部之上，或類似的東西來獲得你想要的效果。