vertical align text in a div without using line-height

0 votes
asked Mar 19 by anonymous

I have div with dynamic content, and i want to center it vertically, i don't want to use position-absolute or line height to align in vertically. Do i have any other options.

my HTML structure looks like this.

<div class="dynamic-content">
  <img src="http://path/to/image">
    some text here ...</span>

2 Answers

0 votes
answered Mar 19 by anonymous

you can use CSS3 display-flex, all modern browser including IE11 support. It was introduced to create flexible layouts. For your specific example you can easily vertically centered your all content like this.

  height: 200px;
  align-items: center; /* Verticaly center */
  justify-content: center; /* Horizontaly center */
0 votes
answered Mar 19 by anonymous


display:flex is also a good option as answered here, but with only modern browser support, you can use old school display:table-cell, it was introduced in CSS1 so old browsers have capacity to support it. Even IE8 can handle it.

  height: 150px;
  width: 200px;
  text-align: center;
  border:1px solid red;
Welcome , qPocho is an online community for programmers share there knowledge.