弹性项目CSS中的文字对齐

问题描述

以下是代码，在大多数情况下，该代码都能正常工作，除非文本太长，然后文本会自行向上移动。让我知道即使屏幕截图中的文本较长，我如何也可以将项目居中对齐。

代码-

* {
  box-sizing: border-box;
}

.container {
  background: #CECCEC;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1;
  background: #b2afe0;
  margin-bottom: 20px;
  padding: 10px;
  box-shadow: 0 0 0 4px #b2afe0;
}

.row:hover {
  transform: translate3d(0,-4px,1px);
  transition-duration: .5s;
}

.col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row:last-child {
  margin-bottom: 0;
}

<div class="container">
  <div class="row">
    <div class="col">This is Column 11</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 13</div>
    <div class="col">This is Column 14</div>
    <div class="col">This is Column 15</div>
  </div>
  <div class="row">
    <div class="col">This is Column 21</div>
    <div class="col">This is Column 22</div>
    <div class="col">This is Column 23</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 25</div>
  </div>
  <div class="row">
    <div class="col">This is Column 31</div>
    <div class="col">This is Column 32</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 34</div>
    <div class="col">This is Column 35</div>
  </div>
</div>

解决方法

这是您想要的吗？

我已添加.col {text-align: center;}进行澄清。

* { box-sizing: border-box; }
.container { background: #CECCEC; padding: 20px; display: flex; flex-direction: column; }
.row { display: flex; flex: 1; background: #b2afe0; margin-bottom: 20px; padding: 10px; box-shadow: 0 0 0 4px #b2afe0; }
.row:hover { transform: translate3d(0,-4px,1px); transition-duration: .5s; }
.col { flex: 1; display: flex; justify-content: center; align-items: center; text-align: center }
.row:last-child { margin-bottom: 0; }

<div class="container">
  <div class="row">
    <div class="col">This is Column 11</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 13</div>
    <div class="col">This is Column 14</div>
    <div class="col">This is Column 15</div>
  </div>
  <div class="row">
    <div class="col">This is Column 21</div>
    <div class="col">This is Column 22</div>
    <div class="col">This is Column 23</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 25</div>
  </div>
  <div class="row">
    <div class="col">This is Column 31</div>
    <div class="col">This is Column 32</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 34</div>
    <div class="col">This is Column 35</div>
  </div>
</div>

,

我自己弄清楚了。我的错误是我正在使用align-items: center;，而应该使用align-items: flex-start;。

工作示例-

* { box-sizing: border-box; }
.container { background: #CECCEC; padding: 20px; display: flex; flex-direction: column; }
.row { display: flex; flex: 1; background: #b2afe0; margin-bottom: 20px; padding: 10px; box-shadow: 0 0 0 4px #b2afe0; }
.row:hover { transform: translate3d(0,1px); transition-duration: .5s; }
.col { flex: 1; display: flex; justify-content: center; align-items: flex-start; }
.row:last-child { margin-bottom: 0; }

<div class="container">
  <div class="row">
    <div class="col">This is Column 11</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 13</div>
    <div class="col">This is Column 14</div>
    <div class="col">This is Column 15</div>
  </div>
  <div class="row">
    <div class="col">This is Column 21</div>
    <div class="col">This is Column 22</div>
    <div class="col">This is Column 23</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 25</div>
  </div>
  <div class="row">
    <div class="col">This is Column 31</div>
    <div class="col">This is Column 32</div>
    <div class="col">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id ut reiciendis facilis deleniti laboriosam ducimus voluptate maiores ipsa distinctio.</div>
    <div class="col">This is Column 34</div>
    <div class="col">This is Column 35</div>
  </div>
</div>