Как выровнять надписи по центру в каждом из блоков независимо от высоты?

414

24 ноября 2016, 10:18

Есть контейнер с блоками на 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>

Answer 1

section { 
  height: 200px; 
  background: silver; 
  text-align: center; 
} 
 
section:before { 
  content: ""; 
  display: inline-block; 
  height: 100%; 
  vertical-align: middle; 
} 
 
div { 
  display: inline-block; 
  text-align: left; 
  vertical-align: middle; 
}

<section><div> 
    <p>test</p> 
  </div><div> 
    <p>test<br />test</p> 
  </div><div> 
    <p>test<br />test<br />test</p> 
  </div><div> 
    <p>test<br />test</p> 
  </div><div> 
    <p>test</p> 
</div></section>

Форматирование такое не случайно. Ещё стоит заметить, что между <section><div> тоже не должно быть пробелов, иначе он появятся из-за :before между ним и первым блоком (ещё и центрирование этим нарушится).

Answer 2

Если я вас правильно понял, то вам просто нужно добавить text-align в блок .table-cell.

Вот так:

.table-cell { 
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

Answer 3

Надо было еще просто добавить в стили .row {height:100%;}. Вот универсальный и кроссбраузерный ie9+ вариант

.main { 
  background-color: #231f20; 
  color: #fff; 
  min-height: 100px; 
  height: 1px; 
} 
.container { 
  height: 100%; 
  background-color: red; 
} 
.row { 
  height: 100%; 
} 
.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>