主页 / 问题 / 1062332
Accepted
Сергей Плотницкий
Asked:2020-12-24 01:11:55 +0000 UTC2020-12-24 01:11:55 +0000 UTC

弹性项目内容的垂直对齐

  • 772

我使用 flex 容器对齐块。原来是这样的情况：

当其中一个文本移动到下一行时，所有其他块也变得更高，而文本仍然在顶部，它需要位于中心。你能告诉我如何将这些块中的文本与垂直中心对齐吗？ 在此处输入图像描述

编码：

 <div style="padding: 15px; text-align: center; font-weight: bold; background: black; color: white;  flex-wrap: wrap; display: flex;   justify-content: space-around; ">

 <div style="width: 20%; text-align: center; border: 1px solid red;">NATIVE GROUP HDHFJFJFJFJF DJRKTKTK</div>

 <div style="width: 20%; text-align: center; border: 1px solid red">КУРСЫ</div>

 <div style="border: 1px solid red; width: 20%; text-align: center; padding: 2px; border: 1px solid #1AB488; border-radius: 20%; color: #1AB488">Sign Up</div>

 </div>
flexbox

1 个回答

  1. Best Answer

    .inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.inner div {
  width: 100%;
}

.wrap {
  width: 20%;
  text-align: center;
  border: 1px solid red;
}
    <div style="padding: 15px; text-align: center; font-weight: bold; background: black; color: white;  flex-wrap: wrap; display: flex;   justify-content: space-around; ">

  <div class="wrap">
    <div class="inner">
      <div>NATIVE GROUP HDHFJFJF DJRKTKTK GROUP HDHFJFJF DJRKTKTE GROUP HDHFJFJF 
      </div>
    </div>
  </div>

  <div class="wrap">
    <div class="inner">
      <div>КУРСЫ</div>
    </div>
  </div>

  <div class="wrap">
    <div class="inner">
      <div>Sign Up</div>
    </div>
  </div>

</div>

    • 0

相关问题