在HTML元素的絕對中心的位置文本

嗨我試圖做一個非常簡單的X刪除按鈕，我可以在整個這個網站使用我正在建設但是，我似乎無法得到它正確定位...在HTML元素的絕對中心的位置文本

這是它迄今：

<button id="clear-input-location" name="clear-input-location">×</button> 


#clear-input-location { 
    display:block; 
    background: #CCC; 
    color: #FFF; 
    border: none; 
    font-weight: bold; 
    font-size: 20px; 
    border-radius: 20px; 
    line-height: 0; 
    height: 26px; 
}

在這裏看到小提琴：http://jsfiddle.net/kpheR/

來源

2013-06-20 André Figueira

問題是什麼？在Chrome 27中看起來不錯！ –

不夠完美，它比頂部更接近底部 –

@AndréFigueira如果你想**完全**作爲設計的結果，你應該使用圖像。 – 2013-06-20 13:17:23

添加margin: 0 auto;風格到你的文字，這將水平居中。

來源

2013-06-20 13:09:20 Praveen

不能解決問題......沒有水平對齊問題，但是是一個垂直的。 –

試試這個

<div class="a"> 
    <button id="clear-input-location" name="clear-input-location">×</button> 
</div> 

.a{ 
    text-align:center; 
}

Demo

來源

2013-06-20 13:12:10 Amit

不解決問題......沒有水平對齊問題，而是垂直對齊問題。 –

我已經在一個跨度包裹×然後內造型的跨度爲X正確定位解決了這個問題。不管怎麼說，還是要謝謝你。

如果任何人需要這樣的：

http://fiddle.jshell.net/kpheR/3/

來源

2013-06-20 13:21:21

對我來說，這太偏向於頂部和右側。 – ajp15243

在Chrome瀏覽器上看起來很好，我現在仍然在使用其他瀏覽器樣式，因此它可以在任何地方使用...... –

好吧，如果您對此感到滿意......請注意字體在操作系統之間甚至有所不同，而不僅僅是在瀏覽器之間。 – ajp15243

嘗試

.center-text { 

text-align: center; 
vertical-align: middle; 

}

來源

2013-06-20 13:22:30

另請參閱http://stackoverflow.com/questions/9249359/text-vertical-align-in-a-div –

在HTML元素的絕對中心的位置文本

回答

相關問題