在div中垂直對齊鏈接

Question

這是我的代碼： http : //jsfiddle.net/spadez/Z3he9/

我一直在嘗試將綠色圓圈在白色框中垂直對齊，但是我在努力應如何解決這個問題。

使用vertical-align: center; 如果應用於圓，則不執行任何操作。

任何人都可以以最語義正確的方式解釋該怎么做。

Answer 1

從title類中刪除display:block屬性，這應該可以解決問題。

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

工作小提琴

Answer 4

正如Dave Mroz所說，從.title刪除display:block應該可以幫到您。 但是，為了避免使.box元素的原始尺寸受到.box ，您還應該清除.title和.number之后的浮點數。

這樣 。