Center Vertically The Content of a Div ( Not by Line-Height )

center vertically the content of a div ( not by line-height )

You have to add a second div to achieve this.

<div draggable="false" id="coffee" style="position: absolute; overflow: auto; text-align: left; font-size: 23px; color: rgb(26, 66, 108); font-family: roboto, Helvetica; font-style: normal; font-weight: bold; -webkit-transition: none; transition: none; left: 0px; top: 67.125px; height: 234.93749999999997px; opacity: 1;">
    <div class="inner">
    Free coffee for all the people who visit my restaurant
    </div>
</div>

#coffee {
    display: table;
    width: 300px;
    background-color: red;
}
#coffee .inner{
    vertical-align: middle;   
    display: table-cell;
}

Example: http://jsfiddle.net/2Mb39/12/

Center with line-height without height

If a single-text is present, your line-height will be enough to vertically-center the text. It is because, since even 1 single line is present, equalling it out to 200px, will automatically set min-height to 200px.

.container {
  width: 300px;
  line-height: 200px;
  text-align: center;
  outline: 1px solid red;
}

<div class="container">
  <p>This is some text.</p>
</div>

why the height of the out div is affected by vertical-align

As It is explained Here

Aligns the middle of the element with the baseline plus half the
x-height of the parent.

The line-height of your .wrap element is by default 1.5 that inherits from the body, the vertical align property will render depending on your line-height, so if the line height is bigger than your wrapper element, you will see the effect. to fix it just put line-height in your .wrap class, you can play with it to see how the line-height affects the vertical alignment.

body {  line-height: 1.5;}
.wrap {  line-height:1;  background:red;}
.btn {  font-size: 14px;  padding: 4px;  line-height: 1;  box-sizing: border-box;  border: 1px solid blue;  vertical-align: middle;}

<div class="wrap">  <button class="btn">    OK  </button></div>

How can I vertically align elements in a div?

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

---

In a nutshell _{^{(and to prevent link rot)}}:

• Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
• For block elements, vertical alignment is harder and strongly depends on the specific situation:
  
  • If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
  • If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
  • … there are more such special cases.

Vertically aligned item using line-height is slightly off middle

The culprit here is not so much the line-height, but rather the vertical-align: middle. It tries to align your box with the text that may hypothetically be inside the parent box. Where the inner box ends up depends on the font-size of that text. You can push the box further down by increasing the font-size of its parent:

.container{  height: 45px;   width: 100%;  line-height: 45px;   font-size: 45px;  background-color: red;   display: inline-block}
.item{  height: 15px;   width: 40px;   background-color: green;   vertical-align: middle;   display: inline-block;}

<div class="container">job  <div class="item">  </div></div>

Why does setting line-height the same as content height vertically center text?

line height is the amount of space above and below elements. thats pretty much all I can tell you.

---

Related Topics