居中一個圖像和文字在一個按鈕，水平和垂直內

我想在純CSS中建立一個按鈕，並在對齊不同的元素壯觀地失敗。這可能很容易，但我無法理解它。這是它應該是什麼樣子：居中一個圖像和文字在一個按鈕，水平和垂直內

enter image description here

的按鈕應該包含文本和圖像。兩者都應該垂直居中。他們兩個在一起應該水平居中。

我可以得到這兩個工作在自己的工作，但不是在同一時間。，

我真的找一些指導，這將是這樣做的最佳方式，但這裏是我使用的，只要簡單地對我說：

<span style="display:table; text-align:center;"> 
<span style="display:table-cell; position:relative; "> 
    <a href=… > 
     <img style="position:absolute; top:50%; margin-top:-#{ height/2}px"></img> 
    </a> 
</span> 
    <a href=… > TEXT </a> 
</span>

這是目前的結果。

enter image description here

注意如何圖標應進一步向右，文本應該是一個遠一點的權利也是如此。我目前的理解是，現在它已經死了，因爲使用圖標的絕對對齊將它從流中移除。

（有些奇怪的變量，由於我產生通過再培訓局的HTML。）

來源

2012-12-21 ludwigschubert

後你有什麼至今。 – Todd

我真的在尋找一些關於如何做到這一點的最佳方式的指導，但是發佈了照顧適當垂直對齊的代碼。感謝您的提醒！ – ludwigschubert

你可以只使用一個button一些文本的圖像在裏面。垂直對齊按鈕的內容並添加填充。

<button><span><img src="http://placehold.it/25x25">Some Text</span></button>

button{ 
    padding: 1em 2em; 
} 
img, span{ 
    vertical-align:middle; 
}

DEMO

來源

2012-12-21 02:49:29 Musa

對不起，這不正確地垂直對齊按鈕中的文本。看看你的演示，它似乎太高。 – ludwigschubert

@ludwigschubert它居中見http://s8.postimage.org/g4a3rkmyt/button.png – Musa

哇，這很有趣。對於我在Chrome中你的代碼看起來像這樣：http://s10.postimage.org/pmvuy0emh/not_centered.png – ludwigschubert

你搜索這個HTML：

<html> 
<head> 
<style> 
    .icon_button{ 
     background:#FFFFFF url(http://www.limitedlink.com/images/png/ico.png) no-repeat 4px 4px; 
     padding:4px 4px 4px 22px; 
     height:auto; 
    } 
</style> 

</head> 
<body> 
    <input type="button" value="halo" class="icon_button" /> 
</body> 
</html>

來源

2012-12-21 02:51:23 Reinstar

我看了一下HTML，試了一下，卻沒有看到這是如何適用於居中的。所有的填充都是硬編碼的。圖標和文字都不對齊。但是，謝謝你的努力！ – ludwigschubert

編輯我的Javascript後請看看。我不明白你說的是「硬編碼」，也許你可以更多地解釋我。 – Reinstar

居中一個圖像和文字在一個按鈕，水平和垂直內

回答

相關問題