試圖讓右側的灰色框中心對齊，而不增加利潤/填充它：另一個CSS垂直對齊

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; } 
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; } 
h3 { margin: 0em; padding: 0em; } 
h3 span { margin-left: 0.5em; } 
a { float: right; text-align: right; } 
a span { vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; } 
#content { height: 16em; } 
    </style> 
</head> 
<body> 
<div id="frame"> 
<div id="header"> 
<h3><span>Heading</span><a href="#"><span></span></a></h3> 
</div> 
<div id="content"> 
</div> 
</div> 
</body> 
</html>

http://jsfiddle.net/hotdiggity/4yGh8/

來源

2013-02-26 hotdiggity

其中灰色方塊？小的？它已經居中對我 – 2013-02-26 13:15:02

垂直居中在白框？或將其置於淺灰色框中？ - 也許標籤有誤導性。 – 2013-02-26 13:16:36

水平灰色錶帶內的「中心對齊右側的灰色方塊」。它只是稍微偏離了一點，但有興趣知道是否有一種將它完美集中的方法。 – hotdiggity 2013-02-26 23:13:37

有幾種不同的方法可以解決這個問題，但沒有一個是完美的。

我修改標記略，使其更容易編寫選擇：

<div id="frame"> 
<div id="header"> 
<h3><span>Heading</span><span><a href="#"></a></span></h3> 
</div> 
<div id="content"> 
</div> 
</div>

CSS表

結果可能不漂亮，如果你有這回事來包裝內容：

http://jsfiddle.net/4yGh8/4/

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; } 
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; } 
h3 { margin: 0em; padding: 0em; display: table; width: 100%; } 
h3 span { display: table-cell; vertical-align: middle; } 
h3 span { padding: 0 0.5em; width: 100% } 
h3 span:last-child { width: 1px; line-height: 1; } 
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block } 
#content { height: 16em; }

Flexbox的

確保您檢查http://caniuse.com/#search=flexbox以查看您需要使用哪些前綴來完成此項工作。

http://jsfiddle.net/4yGh8/6/（前綴不包括）

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; } 
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; } 

h3 { 
    margin: 0em; 
    padding: 0em; 
    display: flex; 
    width: 100%; 
    justify-items: space-between; 
    align-items: center; 
} 

h3 span { 
    margin: 0 .5em; 
} 

h3 span:first-child { 
    flex: 1 1 auto; 
} 

a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block } 
#content { height: 16em; }

絕對定位

http://jsfiddle.net/4yGh8/7/

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; } 
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; } 

h3 { 
    margin: 0em; 
    padding: 0em; 
    position: relative; 
} 

h3 span { 
    padding: 0 .5em; 
} 

h3 span:last-child { 
    position: absolute; 
    right: 0; 
    top: 50%; 
    margin-top: -.5em; /* half of the element's height */ 
} 

a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block } 
#content { height: 16em; }

來源

2013-02-26 14:02:39 cimmanon

兩件事情可以做。

添加另一個盒子連接限制的寬度，直到你的塊與浮動權
使用保證金&填充

來源

2013-02-26 13:21:31

你只需要添加position:relative您#frame中間然後position:absolute;top:0;bottom:0; margin:auto;轉換成#header。我編輯了你的fiddle

來源

2013-02-26 13:21:39 dinodsaurus

另一個CSS垂直對齊

回答

CSS表

Flexbox的

絕對定位

相關問題