CSS для вертикального выравнивания текста до середины div

Ответ 1

Измените display: inline-block; на display: table-cell;

Ответ 2

Если ваши многострочные элементы необходимо обернуть для ответных соображений, тогда ваш лучший выбор - Flexbox. Из-за взлома реализации Firefox 2009 Flexbox его нужно обрабатывать несколько иначе, чем вы сделали бы для современных реализаций Flexbox.

http://codepen.io/cimmanon/pen/mxuFa

<ul>
  <li>One lorem ipsum dolor sit amet</li><!--
  --><li>Two</li><!--
  --><li>Three</li><!--
  --><li>Four</li><!--
  --><li>Five</li>
</ul>

li {
  text-align: center;
  vertical-align: middle;
  /* fallback for non-Flexbox browsers */
  display: inline-block;
  /* Flexbox browsers */
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  /* vertical centering for legacy, horizontal centering for modern */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* modern Flexbox only */
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* legacy Flexbox only */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}

Ответ 3

Я сделал вам быстрый пример, используя свойство display: table-cell в родительском div.

CSS:
    .outer {
    width: 500px;
    height: 500px;
    display: table-cell;
    background-color: red;
    vertical-align: middle;
}

.inner {
    display: block;
    width: 300px;
    height: 200px;
    margin: 0px auto;
    background-color: yellow;
}

HTML: <div class="outer"> <div class="inner"> </div> </div>

http://jsfiddle.net/aKT42/

Ответ 4

Попробуйте, это сработает.

    <div class="greenBorder" id="outer">
         <div id="middle">
             <div class="greenBorder" id="inner">
             Your Text Here
             </div>
         </div>
    </div>

Класс Css

    #outer {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        display: table;
        position: static;
    }

    div.greenBorder {
        background-color: #39B9FF;
        text-align: center;
        color: white;
    }

    #middle[id] {
        display: table-cell;
        position: static;
        vertical-align: middle;
        width: 100%;
    }

    #middle {
        position: absolute;
        top: 50%;
    }

Ответ 5

http://jsfiddle.net/DawFy/16/

.header {

display: block;    
text-align: center;
    width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
margin:0px auto;


}
li
 {
list-style-type:none;

 }

<div >
<li>
<div class="header">test1 </div>
<li>
    <div class="header">some text that will wrap</div>
<li>
    <div class="header">test3</div>

Попробуйте это, не знаете, работает ли оно "правильно", но работает

Ответ 6

Большинство из этих решений не будут работать для меня, потому что либо высота была указана вручную (что я не мог сделать), либо такие вещи, как inline-block и float, удалили бы способность внутреннего div наследовать родительский div высота. Я закончил создание таблицы с двумя столбцами, каждая из которых содержала мои div, а затем у меня не возникало проблем с вертикальным центрированием текста.