在CSS中對齊文本

在CSS中對齊文本很容易！通過使用文本對齊：中心; 但我只是讓這個在CSS中對齊文本

.readmore { 
    width: 80px; 
    height: 30px; 
    background: #000000; 
    text-align: center; 
    border-radius: 3px; 
    float: center; 
    color: #fff; 
    font-family: 'Rambla', sans-serif; 
    -webkit-transition: background-color 1s; 
    -o-transition: background-color 1s; 
    -moz-transition: background-color 1s; 
    transition: background-color 1s; 
} 

.readmore:hover { 
    background-color: #F79100; 
    cursor: pointer; 
    color: #000; 
    font-family: 'Rambla', sans-serif; 
}

而在HTML

<div id="readmore">Read More</div>

我的問題是，當我看到按鈕，裏面（閱讀更多）的文本不是完美的中心從頂部對齊 - 左 - 右 - 底。我該怎麼做！？

來源

2013-11-02 Master M1nd

請爲此提供一個提琴手。 – arkascha

你給你的div一個id。 ID是用css中的'#'引用的，''是用於類的。 –

@ user2948424那麼，你想把盒子（相對於窗口，文檔，它的父母......）放在中間位置，還是你想將盒子的文字置於盒子的中心？ – Oriol

首先，您使用id="readmore"屬性，但你的CSS是.readmore。相反，使用的一個這些

id="readmore"和#readmore
class="readmore"和.readmore

要水平（相對於其父）居中框，你可以使用

.readmore { 
    margin: 0 auto; 
}

Demo

此外，如果要垂直居中按鈕的文本（相對於盒），使用

.readmore { 
    height: 30px; 
    line-height: 30px; /* same as height */ 
}

Demo

來源

2013-11-02 18:57:26 Oriol

hmm ok謝謝，我現在將使用ID：D，我在我的問題上做了一些更改，你可以再次看到 –

是啊謝謝它的作品！ –

@ user2948424然後，隨時標記我的答案爲接受:) – Oriol

margin-left: auto;和 margin-right: auto; 如果中心對齊所做的DIV ID框中:)

哦，還有，你應該使用的＃。當涉及到ID的時候。點是爲類。

垂直和水平對齊：

您可以使用下面的垂直對齊的div 只要確保你指定寬度和高度％藏漢從左側百分比刪除元素的寬度，這樣做與高度相同的東西。

position: absolute; 
top: 50%; 
left: 50%;`

來源

2013-11-02 18:56:16

'margin：0 auto'。 –

是的，另一種可能性:) – 2013-11-02 18:58:45

嗯，它是中心。但對不起，我忘記提到這個問題，我也希望它來中心。等於從左上角到右下角的利潤率！正如你所說margin-left：auto;保證金右：自動; 我試過margin-top：auto;邊距：汽車;但沒有工作：| –

在你的CSS，改變.readmore到#readmore。

.前綴引用類名稱，而#前綴引用id。

基本上，使用.class和#Id。

來源

2013-11-02 18:57:50

在CSS中對齊文本

回答

相關問題