使用动态数据为所有div提供相同的高度和宽度

Question

在下面的图片中，你可以看到第3个盒子的高度与前2个不同。那是因为里面的文字长于第2个。

是否可以使用不同长度的文本保持框的高度和宽度相同。文本也应该居中，较长的文本应该在多行上。

链接到CodePen。

http://codepen.io/anon/pen/LbgKEb

<form>
    <div id="test"><label><input class="test" type="checkbox" /> This is a practice</label></div>
    <div id="test"> <label><input class="test" type="checkbox" /> This si another practice</label></div>
    <div id="test"> <label><input class="test" type="checkbox" /> Practice practice practice</label></div>

</form>

Answer 1

不要复制ID。这是一种犯罪。使用vertical-align: middle来解决您的问题。

label {
  text-align:center;
  vertical-align: middle;
}

.test {
  border: 1px solid red;
  width:  150px;
  height: 200px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"].test {
  display: none;
}

<form>
  <div>
    <div class="test">
      <label>
        <input class="test" type="checkbox" />This is a practice</label>
    </div>
    <div class="test">
      <label>
        <input class="test" type="checkbox" />This si another practice</label>
    </div>
    <div class="test">
      <label>
        <input class="test" type="checkbox" />Practice practice practice</label>
    </div>
  </div>
</form>

预览

注意：当width和height已经定义时，我不会去那个过度使用的Flexbox！如果有人建议使用flexbox。

如果您需要将垂直对齐设为居中而不是inline-block，请使用table-cell并修复它。

label {
  text-align:center;
  vertical-align: middle;
}

.test {
  border: 1px solid red;
  width:  150px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

input[type="checkbox"].test-input {
  display: none;
}

<form>
  <div>
    <div class="test">
      <label>
        <input class="test-input" type="checkbox" />This is a practice</label>
    </div>
    <div class="test">
      <label>
        <input class="test-input" type="checkbox" />This si another practice</label>
    </div>
    <div class="test">
      <label>
        <input class="test-input" type="checkbox" />Practice practice practice</label>
    </div>
  </div>
</form>

预览

Answer 2

您可以使用 CSS Flexbox ，只使用一个属性nil，使用display: flex;使其垂直对齐中心＆amp; align-items: center使其横向居中。像：

＆＃13;

＆＃13;

justify-content: center

＆＃13;

.test-holder {
  display: flex;
  justify-content: center;
}

label {  
  text-align:center;
  vertical-align: middle;
}

.test {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  width:  150px;
  height: 200px;
}

input[type="checkbox"].test {
  display: none;
}

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！