CSS表

Question

尝试将右侧的灰色框对齐，而不添加边距/填充：

<!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/

Answer 1

有几种不同的方法可以解决这个问题，但没有一种方法是完美的。

我稍微修改了标记，以便更容易编写选择器：

<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; }

Answer 2

你可以做两件事。

添加另一个框限制是宽度，直到你的街区位于中间，右边是浮动
使用保证金＆amp;填充

Answer 3

您只需将position:relative添加到#frame，然后position:absolute;top:0;bottom:0; margin:auto;添加到#header。我修改了您的fiddle

另一个css垂直对齐

3 个答案:

CSS表

Flexbox的

绝对定位