CSS HTML

[Solved – 10 Answers] CSS – HTML -Vertically align text in a div

  • How to find the most effective way to align text with a div?
css code
.wikitechyText
{
    position: absolute;
    left: 15px;
    top: 15px;
    width: 150px;
    height: 309px;
    vertical-align: middle;
    text-align: center;
    font-family: Georgia, “Arial", Times, serif;
    font-style: italic;
    padding: 1em 0 1em 0;
}

  • For CSS2 browser one can use display:table/display:table-cell to center content.

JSFiddle:

html code
<div style="display: table; height: 400px; overflow: hidden;">
     <div style="display: table-cell; vertical-align: middle;">
       <div>
         everything is vertically centered in modern IE8+ and others.  </div> </div>   </div>
  • In order to merge for old browser (IE6/7) into styles with using # to hide styles from newer browsers:
html code
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    " #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
     everything is vertically centered
    </div>
  </div>
</div>

  • You need to add the line-height attribute and that attribute must match the height of the div.
  • In your case:
css code
height: 309px;
line-height: 309px;
  • In fact, you could probably remove the height attribute altogether.

HTML :

html code
<ul>
    <li>
        <p>Wikitechy</p>    </li>    <li>
        <p>Wikitechy is a technological website</p>    </li>
    <li>
        <p>Wikitechy enhances the technical ideas</p> </li></ul>

CSS :

css code
li 
{
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

HTML :

html code
<ul>
    <li>
        <p> Wikitechy </p> </li>    <li>
        <p> Wikitechy is a technological website </p> </li> <li>
        <p> Wikitechy enhances the technical ideas </p> </li></ul>

CSS :

css code
p 
{
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

HTML :

html code
<div style="height: 200px">
    <div id="mywikitechytext">Wikitechy says that this is vertically aligned text within a div</div>
</div>

CSS :

css code
#mytext 
{
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
  • This centers the text in div to the exact vertical middle of a 200px-high outer div.

  • With display: flex. All text div has vertical centered:
css code
div 
{
    display: flex;
    align-items: center;
}
  • And if you want, horizontal:
css code
div
{
  display: flex;
  align-items: center;
  justify-content: center;
}

  • Browser supported FIX TO VERTICALLY ALIGN TEXT IN A DIV:
css code
div
{
    margin:5px;
    text-align:center;    display:inline-block;
}
.vcenter
{
    background:#eee;    width: 150px;    height: 150px;}
.vcenter:before 
{
    content: " ";
    display: inline-block;    height: 100%;    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    .vcenter :first-child 
{
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}
<div class="vcenter">
  <p>This is my Text</p></div>
<div class="vcenter">
  <p>This is my Text<br />Text</p></div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p></div>

  • Here is a fix that works best for a single line of text.
  • It can also work for multi-lined text with some modification if the number of lines is known
css code
.testimonialText
{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before 
{
/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

HTML :

html code
<div class="block-title"><h3>Wikitechy says that this content is vertically centered element</h3></div>

CSS :

css code
.block-title 
{
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 
{
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

  • This is another variation of the div in a div pattern using calc() in CSS.
html code
<div style="height:300px; border:1px solid blue;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid green;)">
    Text in inner div.
  </div>
</div>		
  • This works, because:
  • position:absolute for precise placement of the div within a div
  • we know the height of the inner div because we set it to 20px.
  • calc(50% – 10px) for 50% – half the height for centering the inner div

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