0

For me it seems weird that the only way to center something inside a DIV is to play on the line-height as specified here: center vertically the content of a div

I could have everything inside a div (divs, span, images, link) and I simply would like to center the content of the DIV vertically.

For which theoretical reason it doesn't simply work?

Community
  • 1
  • 1
Revious
  • 7,816
  • 31
  • 98
  • 147

3 Answers3

0

use display: table; and display:table-cell; demo

<div id="coffee">
    <div class="inner">
    Free coffee for all the people who visit my restaurant
    </div>
</div>

#coffee {
    display: table;
    width: 300px;
  height: 300px;
    background-color: red;
}
#coffee .inner{
    vertical-align: middle;   
    display: table-cell;
  text-align:center;
}
Alex Wilson
  • 2,421
  • 11
  • 13
0

There is a trick using a div with display: inline-block:

<div style="height:300px; background: red;"> <div style="height:100%; vertical-align:middle; background: blue;display: inline-block;">trick</div>bla bla </div>

The "trick" <div> can be empty

Jsfiddle : http://jsfiddle.net/AqU7B/2/

pbrenna
  • 61
  • 3
0

http://jsfiddle.net/raamaragavan/79fGd/

html code goes here
<div class="box centerFlex">

 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem   Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


</div>
css code goes here
.box {
border:1px solid red;
width:100%;
height:200px;   
 }
.centerFlex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
user3778043
  • 197
  • 1
  • 4