我在对齐 css 中的文本时遇到了一些误解。我在 4 个 div 中有不同的文本。文本可能会随着时间而改变,但高度和宽度属性应该保留。当我给出一个 div 高度和宽度并尝试设置垂直居中对齐时,事实证明,文本最多的一个 block 向下 float 了一点,它似乎是在对齐容器中的文本而不是让它们保持在一行中.你能告诉我出了什么问题以及解决方案是什么吗?这是代码:
.buttons{
width: 970px;
height: 160px;
margin: 0 auto;
padding-top: 70px;}
.s2-btn {
cursor: pointer;
display: inline-flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
line-height: 1.2;
margin-right: 30px;
&:last-child {
margin-right: 0;
}
.btn-gold {
color: #000;
cursor: pointer;
font-size: 18px;
height: 90px;
width: 215px;
padding: 0;
background: linear-gradient(to left, #D6B968, #FFF5AA, #C49C00 40%, #FFF5AA, #D6B968);
}
<div class="buttons">
<a href="#"><div class="btn-gold s2-btn">Lorem Ipsum is simply dummy text</div></a>
<a href="#" ><div class="btn-gold s2-btn">Lorem Ipsum is simply dummy text</div></a>
<a href="#" ><div class="btn-gold s2-btn">Lorem Ipsum is simply dummy text of the printing</div></a>
<a href="#" ><div class="btn-gold s2-btn">Lorem Ipsum is simply dummy text</div></a>
</div>
最佳答案
试着检查一下..
编辑:添加了一些关于所做更新的解释。
HTML:
- 将 div 作为容器而不是 anchor 标记的子元素。
Do not make an anchor tag a container.
CSS:
- 在
s2-button
上添加了css calc()
以在每个div/container
上添加宽度
Note css calc() is not widely supported yet.
将此视为您的垫脚石,只需对您的 css 进行少量编辑,并且您不需要使用 calc。
- 移除
s2-button
上的margin-right
.buttons{
width: 970px;
height: 160px;
margin: 0 auto;
padding-top: 70px;}
.s2-btn {
cursor: pointer;
width: calc(25% - 30px);
display: inline-flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
line-height: 1.2;
text-align:center;
&:last-child {
margin-right: 0;
}
.btn-gold {
color: #000;
cursor: pointer;
font-size: 18px;
height: 90px;
width: 215px;
padding: 0;
background: linear-gradient(to left, #D6B968, #FFF5AA, #C49C00 40%, #FFF5AA, #D6B968);
}
<div class="buttons">
<div class="btn-gold s2-btn">
<a href="#">Lorem Ipsum is simply dummy text</a>
</div>
<div class="btn-gold s2-btn">
<a href="#" >Lorem Ipsum is simply dummy text</a>
</div>
<div class="btn-gold s2-btn">
<a href="#" >Lorem Ipsum is simply dummy text of the printing</a>
</div>
<div class="btn-gold s2-btn">
<a href="#" >Lorem Ipsum is simply dummy text</a>
</div>
</div>
关于html - 在 css 中垂直对齐文本时跳转 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36688581/