垂直对齐父div元素内的文本元素？

Question

我正在尝试对齐div中的文本。我在这里阅读了SoF的4个主题，他们都推荐使用vertical-align属性。在我的情况下，它不起作用。

.free { 
 
    display: inline-block; 
 
    -webkit-border-radius: 4; 
 
    -moz-border-radius: 4; 
 
    border-radius: 4px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #ff0000; 
 
    background: #ffffff; 
 
    border: dashed #ff0000 2px; 
 
    width: 105px; 
 
    height: 46px; 
 
    font-size: 1.07rem; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    margin-bottom: 0; 
 
} 
 
.free p { 
 
    vertical-align: middle; 
 
}

<div class="free"> 
 
    <p>Text</p> 
 
</div>

Answer 1

尝试这样的：Demo

添加以下代码在你的CSS

.free { 
line-height:46px; 
} 

.free p {  
    background-color:#ccc; 
    padding:0; margin:0; 
} 

希望这有助于！

Answer 2

这是因为您使用的是display: inline-block;而不是display: table;。检查以下内容：

.free { 
 
    display: table; 
 
    -webkit-border-radius: 4; 
 
    -moz-border-radius: 4; 
 
    border-radius: 4px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #ff0000; 
 
    background: #ffffff; 
 
    border: dashed #ff0000 2px; 
 
    width: 105px; 
 
    height: 46px; 
 
    font-size: 1.07rem; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    margin-bottom: 0; 
 
} 
 
.free p { 
 
    vertical-align: middle; 
 
}

<div class="free"> 
 
    <p>Text</p> 
 
</div>