html - 在 css 中垂直对齐文本时跳转 DIV

Question

我在对齐 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>

Answer 1

试着检查一下..

编辑:添加了一些关于所做更新的解释。

HTML:

1. 将 div 作为容器而不是 anchor 标记的子元素。

Do not make an anchor tag a container.

CSS:

1. 在 s2-button 上添加了 css calc() 以在每个 div/container 上添加宽度

Note css calc() is not widely supported yet.

将此视为您的垫脚石，只需对您的 css 进行少量编辑，并且您不需要使用 calc。

1. 移除 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>