給所有div相同的高度和寬度與動態數據

Question

在圖像下面可以看到第三盒子高度是從因爲文本的第一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已定義，我也不去爲overkilling 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的與應用只有一個屬性display: flex;，使用align-items: center使其對準垂直居中& justify-content: center使其水平居中。像：

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

<form> 
 
    <div class="test-holder"> 
 
    <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 is another practice</label></div> 
 
    <div class="test"> <label><input class="test" type="checkbox" /> Practice practice practice</label></div> 
 
    </div> 
 
</form>

希望這有助於！