如何使div（在另一个div内）水平和垂直对齐

Question

我有3个div，它们是水平对齐的（浅绿色）。每个div内有两个div（红色和黑色div）。

我想做的是，与红色div无关，水平对齐黑色div。黑色div的CSS是

.black-div {
  width: 100%;
  height: 45px;
  max-width: 235px;
  display: inline-block;
  color: #33244a;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  line-height: 43px;
  border: 2px dashed #d5d1d8;
  border-radius: 6px;
  box-sizing: border-box;
}

输出将是这样的

我一点也不擅长CSS。我尝试使用位置：固定/绝对，但没有运气。

Answer 1

尝试一下。

使用div和min-height。

section{
  display: inline-block;
  border: 1px solid red;
  width: 100px;
}
.textarea-wrap{
  overflow: hidden;
    min-height: 200px;
}
.textarea-wrap > textarea{
  width: 100%;
  resize: none;

}
.red{
  background-color: red;
  
}

<div>
  <section>
    <div class="textarea-wrap">
      <textarea rows="3">12312312</textarea>
    </div>
    <div class="red">
      red
    </div>
  </section>
  
  <section>
    <div class="textarea-wrap">
      <textarea rows="10">12312312</textarea>
    </div>
    <div class="red">
      red
    </div>
  </section>
  
  <section>
    <div class="textarea-wrap">
      <textarea rows="6">12312312</textarea>
    </div>
    <div class="red">
      red
    </div>
  </section>
</div>

Answer 2

您应该使用表格使其更易于管理，或者在黑色div上使用绝对定位，以便可以从蓝色div的底部开始对其进行测量。

Answer 3

可能有没有隔垫的解决方案。我在寻找它：）

找到无间隔的解决方案 justify-content: space-between;

.wrapper {
  display: flex;
  flex-direction: row; /* flex in a row inside (make columns .col) */
}

.col {
  display: flex;
  flex-direction: column; /* flex in a column inside */
  justify-content: space-between; /* since the elements must not grow, fill the space between them */
  
  flex: 1 1 100px; /* grow and shrink of col allowed to fill row evenly starting at 100px*/
  margin: 5px;
  border: 3px solid black;
  background-color: aqua;
}

.red {
  flex: 0 1 auto; /* no vertical (col) growing (so it does not expand vertically) */
  border: 3px solid black;
  border-radius: 10px;
  background-color: red;
  margin: 5px;
  padding: 10px;
}

.black {
  background-color: black;
  color: white;
  margin: 5px;
  padding: 10px;
  display: block;
  flex: 0 1 auto; /* no growing allowed */
}

.resize {
  overflow: hidden;
  resize: vertical;
}

<div class='wrapper'>
  <div class='col'>
    <div class='red'>Some wide wide wide wide wide wide Text</div>
    <div class='black'>Footer</div>
  </div>
  <div class='col'>
    <div class='red'>Some<br/>much<br/>longer<br/>Text</div>
    <div class='black'>Footer</div>
  </div>
  <div class='col'>
    <div class='red resize'>Some Text<br><b><u>Resize me!</u></b></div>
    <div class='black'>Footer</div>
  </div>
</div>

编辑已删除spacer div

Edit2 添加了CSS注释，以便于理解