CSS HTML

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

  • 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>

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.

  • We can do this :

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

  • 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;
}

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;
}

  • 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>

  • 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%);
}

  • 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>

  • 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%);
}

See also  [Solved – 3 Answers] Best way to center a <div> on a page vertically and horizontally?

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;
}

  • Add style,
css code
style="float: left; “
  • for each element inside the div tag. So each element will get aligned vertically…

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!

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment