Как отцентровать текст в двустрочном div?

376

09 августа 2017, 17:41

Делаю таблицу на div, требуется отображать данные в 2 строки.

Делаю так:

div {
    height: 3em;
    line-height: 1.5em;
    overflow: hidden;
}

Но в некоторых ячейках текста только на 1-ну строчку.

Как отцентровать текст по вертикали, при сохранении двухстрочных div?

Answer 1

div { 
  display: inline-block; 
  max-height: 3em; 
  line-height: 1.5em; 
  overflow: hidden; 
  vertical-align: middle; 
   
  outline: 1px dotted red; 
  width: 9em; 
}

<div>Однострочый</div> 
<div>Многострочный. Многострочный.</div> 
<div>Overflow работает. Overflow работает. Overflow работает.</div>

Answer 2

div { 
  display: inline-block; 
  height: 3em; 
  line-height: 1.5em; 
  overflow: hidden; 
   
  outline: 1px dotted red; 
  width: 9em; 
} 
 
div:before { 
  content: ""; 
  height: 100%; 
} 
 
span, div:before { 
  display: inline-block; 
  vertical-align: middle; 
} 
 
span { 
  width: 100%; 
}

<div><span>Однострочый</span></div> 
<div><span>Многострочный. Многострочный.</span></div> 
<div><span>Overflow работает. Overflow работает. Overflow работает.</span></div> 
 
<hr> 
 
<div><span>Только не сломай. Правый уполз вниз.</span></div> 
<div> 
  <span>Только не сломай. Правый уполз вниз.</span> 
</div>