垂直居中相对于另一个元素在CSS？

我有类似以下情况：垂直居中相对于另一个元素在CSS？

<div id="container"> 
    <div id="prev"> 
    prev 
    </div> 
    <div id="content"> 
    some content 
    </div> 
    <div id="next"> 
    next 
    </div> 
</div>

哪里是什么，我想是的结果是这个样子：

enter image description here

注意，一个和下一个是垂直居中参考内容，并且它全部在页面上水平居中。

对不起，如果这已被覆盖之前，但似乎有很多不同的方式来做类似的事情，我不确定哪些适用于这种情况。只要它在Chrome，Safari，Firefox和IE浏览器（不是关键）中运行，CSS3/HTML5就不是问题。

编辑：另外，我不确定这个问题是否真的很清楚，但我不知道内容的大小。它可能是任何东西。

编辑2：此外，内容通常是一个图像。

来源

2011-10-06 Paul Wicks

有几种方法可以做到这一点，我的选择是使用显示：容器上的table-cell和vertical-align：middle。问题是你不能把位置绝对放在容器上：

#container { 
    border: solid #000 1px; 
    display: table-cell; 
    vertical-align: middle; 
    height: 400px; 
    width: 400px; 
    text-align: center; 
} 

#container div { 
    display: inline-block; 
} 

#content { 
    border: solid #000 1px; 
    padding: 10px; 
    width: 200px; 
}

适用于IE8 +和现代浏览器。

http://jsfiddle.net/E97yY/

来源

2011-10-06 23:52:08 Duopixel

另一种方法，这次使用绝对定位，如果你愿意改变你的HTML结构的位。请注意，如果您想使用容器限制宽度，或者可能添加另一个宽度约束包装，则Prev和Next按钮可以位于内容div内的任何位置，即使在内容div之外。（没有必要，我想象。）

注意：我从这个答案中删除了所有不必要的标记。看到小提琴的一个明显有效的例子。

Fiddle

的HTML：

<div id="container"> 
    <div id="content"> 
     <div id="prev">prev</div> 
     <div id="next">next</div> 
     some content 
    </div> 
</div>

的CSS：

#content { 
    margin:0 auto; 
    position:relative; 
} 
#prev, #next { 
    position:absolute; 
    width:40px; 
    height:20px; 
    top:50%; 
    margin-top:-10px; /* negative half of height */ 
} 
#prev { 
    left:-45px; /* negative [width plus any desired padding] */ 
    text-align:right; 
} 
#next { 
    right:-45px; /* negative [width plus any desired padding] */ 
    text-align:left; 
}

来源

2011-10-07 00:21:12

居中元素的最好方法是使用inline-blocks和vertical-align。

这里是一个开始小提琴：http://jsfiddle.net/kizu/7Qj3G/

在这里你设置display: inline-block到需要的元素，添加vertical-align: middle他们，它几乎完成。

剩下的事情是，如果你在IE中需要支持，那么你需要通过在其上使用display: inline; zoom: 1;来“打开”块级元素的inline-block行为。

来源

2011-10-07 21:49:17 kizu

垂直居中相对于另一个元素在CSS？

回答

相关问题