Дайте всем DIVS одинаковую высоту и ширину с динамическими данными

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 уже определены, я не хожу по этой 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>

Надеется, что это помогает!