1

如此处所示 - http://jsfiddle.net/d4wUu/，我无法将带有“测试”一词的红色边框框沿包含它的黑框的高度居中。它与黑盒子的顶部边框保持对齐，在其下方留出一些空间。

margin-top也不工作。知道我如何获得margin: auto或margin-top（相对于包含它的黑框）在此处的红色边框框上工作吗？

4

3 回答 3

1

小提琴

添加那些：

display: table-cell;
vertical-align: middle;

到#heading.

于 2013-03-09T14:13:51.000 回答
0

有几种方法可以使元素垂直居中。据我所知，margin: auto除非您使用某种类型的表格/表格单元格样式，否则不会在元素上垂直工作。

这些添加到你的 CSS 是一种垂直居中的方法：

#heading {  
    position:relative;
}
#heading-title {
    position:absolute;
    top: 50%;
    margin-top: -25px; /* this is half the height of the element */
}

这是一个更新的小提琴显示这个工作。

于 2013-03-09T14:14:51.513 回答
-1

另一种解决方法，

给. margin: 7px auto_#heading-title

7px因为父元素的高度是65px，子元素的高度是50px 。有身高差15px。因此，将和15px分开。margin-topmargin-bottom

仅当父元素和子元素的高度像上面的 OP 描述中那样固定时，才能使用此技术。

工作小提琴

于 2013-03-09T14:13:35.930 回答