Question

我在css中对齐文本时面临一点误会。我在4个div中有不同的文字。文本可能会随时间更改，但高度和宽度属性应保留。当我给出div高度和宽度并尝试设置垂直对齐中间时，结果显示，一个具有最多文本的块稍微浮动一下，似乎它正在对齐容器中的文本而不是让它们保持在一行中。请问，请告诉我出了什么问题，解决方案是什么。这是代码：

 .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：

将div设为容器，而不是锚标记的子项。

不要将锚标记作为容器。

CSS：

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

注意css calc（）尚未得到广泛支持。

将此视为您在css上进行少量修改的踏脚石，您无需使用计算结果。

删除margin-right

s2-button

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

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

1 个答案: