[Solved -11 Answers] CSS-HTML Vertical alignment of elements in a div-Learn in 30 Sec from Microsoft Awarded MVP

PROBLEM:

We have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other.
One of the images needs to be absolute positioned within the div.
What is the CSS needed for this to work on all common browsers?

html code

<div id=header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

SOLUTION 1:

HTML:

html code

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

css code

div.ext-box 
{
 display: table; width:100%;
}
div.int-box 
{
 display: table-cell; vertical-align: middle; 
}

Obviously, whether you use a .class or an #id, the result won’t change.

SOLUTION 2:

We can do this :

css code

.vcontainer 
{
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

SOLUTION 3:

Now that flexbox support is increasing, this CSS applied to the containing element would vertically center the contained item:

css code

.container 
{        
    display: flex;
    align-items: center;
}

Use the prefixed version if you also need to target Explorer 10, and old (< 4.4) Android browsers:

css code

.container 
{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

SOLUTION 4:

HTML:

html code

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

css code

div:before 
{
content:" "; display:inline-block; height:100%; vertical-align:middle;
}
div p 
{
display:inline-block;
}

SOLUTION 5:

Use this formula, and it will works always without cracks:

css code

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

SOLUTION 6:

To position block elements to the center (works in IE9 and above), needs a wrapper div:

css code

.vcontainer 
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

SOLUTION 7:

Put inside the div a table with 1 row and 1 column, set 100% of width and height, and the property vertical-align:middle.

html code

<div>
    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>
</div>

SOLUTION 8:

Almost all methods needs to specify the height, but often we don’t have any heights.
So here is a CSS3 3 line trick that doesn’t require to know the height.

css code

.element 
{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

It’s supported even in IE9.
with its vendor prefixes:

css code

.element 
{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

SOLUTION 9:

HTML:

html code

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS:

css code

circle 
{
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}
.icon 
{
  font-size: 50px;
  vertical-align: middle;
}

SOLUTION 10:

Add style,

css code

style="float: left; “

for each element inside the div tag. So each element will get aligned vertically…

SOLUTION 11:

Try this:

html code

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

A one-cell table inside the div handles the vertical-align and is backward compatible back to the Stone Age!

Tags6 Methods For Vertical Centering With CSS Centering in CSS: A Complete Guide css - How to vertically center divs? CSS Layout - Horizontal & Vertical Align CSS vertical-align - how to vertically align elements in css div vertical align bottom div vertical align middle div vertical align text div vertical align top horizontal align div html - Vertical alignment of elements in a div html vertical align table vertical align div bootstrap vertical align div inside div Vertically align an div inside a div

[Solved -11 Answers] CSS-HTML Vertical alignment of elements in a div

HTML:

CSS:

We can do this :

Now that flexbox support is increasing, this CSS applied to the containing element would vertically center the contained item:

HTML:

CSS:

Use this formula, and it will works always without cracks:

To position block elements to the center (works in IE9 and above), needs a wrapper div:

Put inside the div a table with 1 row and 1 column, set 100% of width and height, and the property vertical-align:middle.

Almost all methods needs to specify the height, but often we don’t have any heights.

So here is a CSS3 3 line trick that doesn’t require to know the height.

HTML:

CSS:

Try this:

About the author

Wikitechy Editor

Add Comment

OTHER LANGUAGES

HTML:

CSS:

We can do this :

Now that flexbox support is increasing, this CSS applied to the containing element would vertically center the contained item:

HTML:

CSS:

Use this formula, and it will works always without cracks:

To position block elements to the center (works in IE9 and above), needs a wrapper div:

Put inside the div a table with 1 row and 1 column, set 100% of width and height, and the property vertical-align:middle.

Almost all methods needs to specify the height, but often we don’t have any heights.

So here is a CSS3 3 line trick that doesn’t require to know the height.

HTML:

CSS:

Try this:

You may also like

About the author

Wikitechy Editor

Add Comment

OTHER LANGUAGES