Есть контейнер с блоками на bootstrap
. Как сделать универсальный (не зависеть от количества текста и высоты блока) адаптивный вариант выровненных надписей в блоках по горизонтальному и вертикальному центру с кроссбраузерностью ie9+
?
Фидл Практически получилось сделать, единственное, если нужна определенная высота для основного блока, то так не работает. Как довести до универсального варианта?
.main {
background-color: #231f20;
color:#fff;
min-height: 100px;
height:1px;
}
.container {
height: 100%;
background-color: red;
}
.table {
display:table;
table-layout: fixed;
width:100%;
height: 100%;
background-color: blue;
margin-bottom:0;
}
.table-cell {
display:table-cell;
vertical-align:middle;
text-align: center;
float: none !important;
background-color: green;
height: 100%;
}
p {
margin: 0;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="main">
<div class="container">
<div class="row">
<div class="table">
<div class="col-sm-3 table-cell">
<p>test</p>
</div>
<div class="col-sm-3 table-cell">
<p>test<br />test</p>
</div>
<div class="col-sm-3 table-cell">
<p>test<br />test<br />test</p>
</div>
<div class="col-sm-3 table-cell">
<p>test<br />test</p>
</div>
</div>
</div>
</div>
</div>
ie9+
- читайте внимательно описание.flex
- не универсальный вариант.. – Вася 11 ноя '16 в 11:30