我如何垂直居中父母的兩個元素？

正如你在演示中看到的那樣，一旦我添加了<em>，<button>就被取代了。我如何垂直居中父母的兩個元素？

我想button垂直中心在footer。

HTML

<footer> 
    <button class="btn-primary">Reply</button> 
</footer> 

<footer> 
    <em></em> 
    <button class="btn-primary">Reply</button> 
</footer>

CSS

footer { 
    display: block; 
    height: 50px; 
    line-height: 50px; 
    border: 1px solid red; 
    padding: 0 20px; 
    text-align: right; 
    margin-top: 20px; 
} 

em { 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
    border: 1px solid blue; 
    box-sizing: border-box; 
}

來源

2013-08-31 chovy

做一個小的變化到你的HTML。

<footer> 
    <button class="btn-primary">Reply</button> 
</footer> 

<footer> 
    <em>&nbsp;</em> 
    <button class="btn-primary">Reply</button> 
</footer>

將一些文字添加到您的<em>它按預期工作。（如果你不希望在沒有任何文字，只要把 一空。）

Fiddle here.

來源

2013-08-31 09:16:24

您只添加空間。但在你的演示回覆按鈕沒有得到vertical-align – falguni

適合我。謝謝。我想知道是否有一種方法可以用css添加空間。我不喜歡必須記住把' '放在那裏。 – chovy

像這樣請em選擇

DEMO

CSS添加float:left;

em { 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
    border: 1px solid blue; 
    box-sizing: border-box; 
    float:left; 
}

來源

2013-08-31 09:18:01 falguni

向左浮動會將框從正確的位置移動到左側，我們不應該嘗試將元素推向另一側。 –

我不想讓它飄浮在左邊。你的演示是我的原創。 – chovy

@SUNNY R GUPTA你看我的演示你爲什麼給我帶來負面的問題 – falguni

你可以告訴他們行爲如表：http://jsfiddle.net/5h5hc/12/。然後，您的頁腳可以像您喜歡的那樣靈活，並且內容始終以水平爲中心。

<footer> 
    <div><em>an em</em><button class="btn-primary">Reply</button></div> 
</footer>

CSS：

footer { 
    display:table; 
    height:50px; 
    border:1px solid #990000; 
    width:100%; 
} 
footer div { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:right; 
}

來源

2013-08-31 11:44:43 Moob

您只需添加vertical-align: top到<em>否定display: inline-block聲明的默認行爲。 fiddle

來源

2013-08-31 11:51:16 cjross

我如何垂直居中父母的兩個元素？

回答

相關問題