HTML-CSS：跨度按鈕對齊內部

我在button標記中包含的span的對齊方式有問題。HTML-CSS：跨度按鈕對齊內部

我以前已經做過這樣的事情，它工作。事實上，它是相同的CSS，但大小不同。

問題是，包含span似乎是對齊的權利。

enter image description here

CSS：

#closePreviewBtn { 
    position: absolute; 
    height: 24px; 
    width: 24px; 
    right: 0; 
    background: #B9DEFD; 
    border-top: solid 1px #333333; 
    border-left: solid 1px#333333; 
    border-right: solid 1px #333333; 
    border-bottom: solid 1px #333333; 
    border-radius: 4px; 
} 

#closePreviewBtn .close { 
    display: inline-block; 
    position: relative; 
    height: 20px; 
    width: 20px; 
    background: url(../imagenes/close.png) no-repeat center; 
    padding: 0; 
    /*right: 2px; 
    bottom: 1px;*/ //This fixes the problem but it's manual 
}

HTML：

<html> 
<body> 
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button> 
</body> 
</html>

非常感謝！

來源

2012-09-12 JorgeeFG

你已經在你的'#closePreviewBtn它靠右側{右：0; }'。所以，這個問題呢？ – ygssoni

我不是指按鈕。該按鈕應該右對齊。我是指按鈕內的內容，在這種情況下是X圖像。 – JorgeeFG

我注意到，按鈕仍然有它調整爲10px後一些填充。我發現沒有辦法設置這個空間。

我已經找到了解決這個問題的解決方案，即刪除按鈕的高度和寬度，因爲它會展開以覆蓋span並且它將居中。

對於一些奇怪的事情，它適用於小按鈕。但對於像30px x 50px這樣的更大的按鈕，設置高度和寬度將會很好，或者至少在有些情況下填充很難注意。

來源

2012-09-12 19:26:25 JorgeeFG

簡單修復 - 似乎按鈕默認情況下有填充。只要將它設置爲0：

#closePreviewBtn { 
    padding: 0; 
}

現在你可以，但是你想的位置 - 也許將邊緣的跨度，如果你想移動它。

希望幫助你，

來源

2012-09-12 18:32:20

在你#closePreviewBtn規則，去掉right:0;。將位置設置爲絕對值並將其設置爲零可以將元素從文檔流中取出並儘可能地放在最右邊。

jsFiddle example

來源

2012-09-12 18:36:32 j08691

HTML-CSS：跨度按鈕對齊內部

回答

相關問題