需要帮助的垂直对齐的HTML5文本和CSS3

.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制作和我想要在中间文字的正方形。我得到水平对齐，但垂直对齐只是不想工作。

来源

2016-12-14 Raymond Edde

使用柔性它 – Obink

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

来源

2016-12-14 21:34:26

在这种情况下，/如果是单行线，我认为最简单的解决方案是添加与元素高度相同的行高。

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>

来源

2016-12-14 21:36:55

非常感谢你！ –

只需添加到您的CSS

line-height : 16vw;

来源

2016-12-14 21:40:36

添加到您的CSS也能发挥作用：

align-items: center; 
display: flex;

来源

2016-12-14 21:49:33 Qiong

需要帮助的垂直对齐的HTML5文本和CSS3

回答

相关问题