代码之家 › 专栏 › 技术社区 › hotdiggity

另一个css垂直对齐

vertical-alignment css

hotdiggity · 技术社区 · 13 年前

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

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

3 回复 | 直到 13 年前

cimmanon 13 年前

有几种不同的方法可以做到这一点,但没有一种是完美的。

我稍微修改了标记,使其更容易为以下内容编写选择器:

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

Keyx van Lierop 13 年前

你可以做的两件事。

添加另一个框en限制宽度,直到块位于中间且向右浮动
使用保证金&衬料

dinodsaurus 13 年前

你只需要添加 position:relative 给你 #frame 然后 position:absolute;top:0;bottom:0; margin:auto; 到yout #header 。我编辑了你的 fiddle