Question

这是我的代码：http://jsfiddle.net/spadez/Z3he9/

我一直试图在白框内垂直对齐绿色圆圈，但我在努力应该如何接近它。

如果应用于圈子，则使用vertical-align: center;不会执行任何操作。

任何人都可以用最语义正确的方式解释应该如何做。

Answer 1

从display:block类中删除title属性，这应该可以解决问题。

Answer 2

vertical-align不适用于浮动元素，因为浮点数不在正常的流量范围内。该文件。您可以使用inline或inline-block元素进行垂直对齐。

.title{
       display: inline-block;
       vertical-align: middle;
    }

从float: right;删除.number。

Answer 3

你需要像这样改变你的CSS

.box {
background-color: white;
padding: 30px;
margin-bottom: 30px;
border-radius:4px;
height:30px;
}

.title {color: rgb(15, 15, 15);
font-family: myriad-pro, Helvetica, sans-serif;
font-size: 24px;
margin-bottom: 20px;
display:block;
float:left;
}

Working Fiddle

Answer 4

如Dave Mroz所说，从display:block移除.title应该可以帮到你。但是为了保持.box元素的原始尺寸不变，您还应该在.title和.number之后清除浮动。

赞this。

垂直对齐div中的链接

4 个答案: