需要幫助的垂直對齊的HTML5文本和CSS3

Question

.Cube { 
 
    float: left; 
 
    height: 16vw; 
 
    width: 16vw; 
 
    background-color: #545454; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}

<div class="Cube"> 
 
    <a href="#">Random Stuff</a> 
 
</div>

所以我一直在練習網站使用HTML5和CSS製作和我想要在中間文字的正方形。我得到水平對齊，但垂直對齊只是不想工作。

Answer 1

你可以嘗試display:inline;與你的CSS代碼

.Cube { 
    float: left; 
    height: 16vw; 
    width: 16vw; 
    background-color: #545454; 
    display:inline; 
    text-align: center; 
    vertical-align: middle; 
} 

否則，您可以使用填充從頂部調整您的分裂，

padding-top: 50px; 

Answer 2

在這種情況下，/如果是單行線，我認爲最簡單的解決方案是添加與元素高度相同的行高。

line-height: 16vw; 

.Cube { 
 
    float: left; 
 
    height: 16vw; 
 
    width: 16vw; 
 
    line-height: 16vw; 
 
    background-color: #545454; 
 
    text-align: center; 
 
}

<div class="Cube"> 
 
    <a href="#">Random Stuff</a> 
 
</div>

Answer 3

只需添加到您的CSS

line-height : 16vw; 

Answer 4

添加到您的CSS也能發揮作用：

align-items: center; 
display: flex;