vertical align text in a div without using line-height

0 votes
13 views
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">
  <span><strong>$200</strong>
    some text here ...</span>
</div>

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.

.dynamic-content
{
  height: 200px;
  display:flex;
  align-items: center; /* Verticaly center */
  justify-content: center; /* Horizontaly center */
}
0 votes
answered Mar 19 by anonymous

display:table-cell

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.

.dynamic-content
{
  height: 150px;
  width: 200px;
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  border:1px solid red;
}
Welcome , qPocho is an online community for programmers share there knowledge.
...