2

I am trying to have horizontal containers, filled up with text of variable size. If the text is short, the container should have a min-height and center the content vertically. If the text is longer, the container should grow its height, keeping a vertical and bottom margin.

I have prepared a jsfiddle This fiddle has been inspired by this answer , also tried display: table as in this answerand this one

Asons
  • 84,923
  • 12
  • 110
  • 165
NoIdeaHowToFixThis
  • 4,484
  • 2
  • 34
  • 69
  • Please review and comment on any answer, and let us know if something is unclear or missing. If not, then it would be great if you could accept the answer that helped you the most. – Asons Jun 18 '17 at 14:08

2 Answers2

6

You could use flexbox and center the contents with justify-content

div.row {
  border: 1px dotted black;
  min-height:65px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
<div class="row">
  <div class="content">
    This is a case where we have a small text;
  </div>
</div>
<div class="row">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis felis ultricies fermentum elementum. Duis sollicitudin, ligula in posuere sagittis, nibh ex imperdiet ante, quis efficitur est nisl quis nulla. Donec pharetra feugiat arcu sed hendrerit. Integer aliquet porta erat, quis aliquet eros. Sed in pulvinar felis, eget lobortis dui. Vestibulum vitae imperdiet orci, in varius magna. Praesent venenatis, eros quis tristique accumsan, justo tellus tempus metus, vitae pellentesque nisl risus eu diam. Suspendisse lobortis ex et fringilla mattis. 
  </div>
</div>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
1

Flexbox is the most obvious choice, though if browser support becomes and issue, CSS Table does this as easy as Flexbox does.

Updated (Thanks to Gaby aka G. Petrioli)

Firefox, for some reason, seems to no longer honor min-height on a table. Luckily table elements grows with their content, so by simple change min-height to height it will work.

div.row {
  display: table;
  width: 100%;
  border: 1px dotted black;
  height: 65px;
}
div.content {
  display: table-cell;
  vertical-align: middle;
}
<div class="row">
  <div class="content">
    This is a case where we have a small text;
  </div>
</div>
<div class="row">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis felis ultricies fermentum elementum. Duis sollicitudin, ligula in posuere sagittis, nibh ex imperdiet ante, quis efficitur est nisl quis nulla. Donec pharetra feugiat arcu sed hendrerit. Integer aliquet porta erat, quis aliquet eros. Sed in pulvinar felis, eget lobortis dui. Vestibulum vitae imperdiet orci, in varius magna. Praesent venenatis, eros quis tristique accumsan, justo tellus tempus metus, vitae pellentesque nisl risus eu diam. Suspendisse lobortis ex et fringilla mattis. 
  </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165