0

试图在不添加边距/填充的情况下使右侧的灰色框居中对齐：

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

4

3 回答 3

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

弹性盒

确保检查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-26T14:02:39.940 回答
0

你可以做的2件事。

  1. 添加另一个框 en 限制在宽度上，直到您的块位于中间并向右浮动

  2. 使用边距和填充

于 2013-02-26T13:21:31.993 回答
0

您只需要添加position:relative到 your #frame，然后添加position:absolute;top:0;bottom:0; margin:auto;到 yout #header。我编辑了你的小提琴

于 2013-02-26T13:21:39.607 回答