Vertically align text in a div

    |
  • Added:
  • |
  • In: Wordpress

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.

.testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } 
This Question Has 22 Answeres | Orginal Question | shinjuo

If you need to use with the min-height property you must add this CSS on:

.outerContainer .innerContainer { height: 0; min-height: 100px; } 

CSS:

.vertical { display: table-caption; } 

Add this class to the element that contains the things you want to align vertically

You need to add the line-height attribute and that attribute must match the height of the div. In your case:

height: 309px; line-height: 309px; 

In fact, you could probably remove the height attribute altogether.

This only works for one line of text though, so be careful.

Check this simple solution:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div> 

CSS

.block-title { float:left; display:block; width:100%; height:88px } .block-title h3 { display:table-cell; vertical-align:middle; height:inherit } 

JSFiddle

There are several Tricks to display content/image in center of Div. Some of answers are really nice and I am fully agree with these too.

Absolute Horizontal And Vertical Centering In CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

There are more than 10 techniques with Examples. Now it's up to you which you prefer.

No doubt, display:table; display:table-Cell is a better trick.

Some good Tricks are following:

Trick 1 - By using display:table; display:table-cell

HTML

<div class="Center-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> CONTENT </div> </div> </div> 

CSS Code

.Center-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; } 

Trick 2 - By using display:inline-block

HTML

<div class="Center-Container is-Inline"> <div class="Center-Block"> CONTENT </div> </div> 

CSS code

.Center-Container.is-Inline { text-align: center; overflow: auto; } .Center-Container.is-Inline:after, .is-Inline .Center-Block { display: inline-block; vertical-align: middle; } .Center-Container.is-Inline:after { content: ''; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */ } .is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ } 

Trick 3 - By using position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;"> <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;"> <h4>ABSOLUTE CENTER,<br> WITHIN CONTAINER.</h4> <p>This box is absolutely centered, horizontally and vertically, within its container</p> </div> </div> 

Try to embed a table element.

<div> <table style='width:200px; height:100px;'> <td style='vertical-align:middle;'> copenhagen </td> </table> </div> 

Here is a solution that works best for a single line of text.

It can also work for multi-lined text with some tweaking if the number of lines is known

.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*/ } 

Here is a JSFiddle

You can do this by setting the display to 'table-cell' and applying a vertical-align:middle;

 { display:table-cell; vertical-align:middle; } 

This is however not supported by all versions of Internet Explorer according to this excerpt i copied from http://www.w3schools.com/cssref/pr_class_display.asp without permission.

Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" are not supported by IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.

The following table shows the allowed display values also from http://www.w3schools.com/cssref/pr_class_display.asp. I Hope this helps

enter image description here

Vertical Centering in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Article summary:

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

Sample also available at JSFiddle:

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

It is possible to merge hacks for old browser (IE6/7) into styles with using # to hide styles from newer browsers:

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

This is another variation of the div in a div pattern using calc() in CSS.

<div style="height:300px; border:1px solid green;"> Text in outer div. <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)"> 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

Hmm, there're obviously many ways to solve this.

But I have a <div> that's positioned absolutely, height:100% (actually, top:0;bottom:0 and fixed width) and display:table-cell just didn't work to center text vertically. My solution did require an inner span element, but I see many of the other solutions do also, so I might as well add it:

My container is a .label and I want the number vertically centered in it. I did it by positioning absolutely at top:50% and setting line-height:0

<div class="label"><span>1.</span></div> 

And the CSS is as follows:

.label { position:absolute; top:0; bottom:0; width:30px; } .label>span { position:absolute; top:50%; line-height:0; } 

See it in action: http://jsfiddle.net/jcward/7gMLx/

Using flex be careful with differences in browsers rendering.

This works well both for Chrome and IE:

.outer { display: flex; width: 200px; height: 200px; background-color: #ffc; } .inner { display: flex; width: 50%; height: 50%; margin: auto; text-align: center; justify-content: center; align-items: center; background-color: #fcc; }
<div class="outer"><div class="inner">Active Tasks</div></div>

Compare with that one that works only with Chrome:

.outer { display: flex; width: 200px; height: 200px; background-color: #ffc; } .inner { display: flex; width: 50%; height: 50%; margin: auto; background-color: #fcc; }
<div class="outer"> <div class="inner"><span style=" margin: auto;">Active Tasks</span></div> </div>

This is my favorite solution for this issue (simple and very well browser supported):

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> 

<!DOCTYPE html> <html> <head> <style> .container{ height:250px; background:#f8f8f8; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -webkit-box-align: center; justify-content: center; } p{ font-size:24px;} </style> </head> <body> <div class="container"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html> 

It is easy with display: flex. All text div has vertical centered:

div { display: flex; align-items: center; } 

And if you want, horizontal:

div{ display: flex; align-items: center; justify-content: center; } 

You must see the browser version you need; in old versions it does´t work.

There's a simpler way to vertically align the content without resorting to table/table-cell:

http://jsfiddle.net/bBW5w/1/

In it I have added an invisible (width=0) div that assumes the entire height of the container.

It seems to work in IE and FF (latest versions), didn't check with other browsers

 <div class="t"> <div> everything is vertically centered in modern IE8+ and others. </div> <div></div> </div> 

And of course the CSS:

.t, .t > div:first-child { border:1px solid green; } .t { height:400px; } .t > div { display:inline-block; vertical-align:middle } .t > div:last-child { height:100%; } 

Simple solution to an element of not knowing values

HTML

<div class="main"> <div class="center"> whatever </div> </div> 

CSS

.main { position: relative } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } 

You can align center text vertically inside a div using the flexbox.

<div> <p class="testimonialText"> This is the testimonial text. </p> </div> div { display: flex; align-items: center; } 

You can learn more about it on this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Update - Here's a great resource

http://howtocenterincss.com/

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

Update - Using Flexbox

Inline with keeping this post up to date with the latest tech, here's a much easier way to center something using flexbox. Flexbox isn't supported in IE9 and lower.

Here's some great resources:

jsfiddle with browser prefixes

HTML

<ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on 2 lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul> 

CSS

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

Update - Another solution

This is from zerosixthree and lets you center anything with 6 lines of css

This method isn't supported in IE8 and lower

jsfiddle

HTML

<ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on 2 lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul> 

CSS

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

Previous answer

Simple and cross browser approach, useful as links in the marked answer are slightly outdated.

How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or css line heights. No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including IE9, IE8, IE7, IE6, Firefox, Chrome, Opera and Safari. There are 2 special stylesheets (1 for IE7 and another for IE6) to help them along due to their css limitations which modern browsers don't have.

Andy Howard - How to vertically and horizontally center text in an unordered list or div

Edit: As I didn't care much for IE7/6 for the last project I worked on, I used a slightly stripped down version (i.e. removed the stuff that made it work in IE7 and 6). Might be useful for somebody else...

jsfiddle

HTML

<ul> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p><!-- Content --></p> </div> </div> </div> </li> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p><!-- Content --></p> </div> </div> </div> </li> </ul> 

And the CSS:

.outerContainer { display: table; width: 100px; /* width of parent */ height: 100px; /* height of parent */ overflow: hidden; } .outerContainer .innerContainer { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; } li { background: #ddd; width: 100px; height: 100px; } 

I use the following to vertically center random elements easily:

HTML:

<div style="height: 200px"> <div id="mytext">This is vertically aligned text within a div</div> </div> 

CSS:

#mytext { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } 

This centers the text in my div to the exact vertical middle of a 200px-high outer div. Note that you may need to use a browser prefix (like -webkit- in my case) to make this work for your browser.

This works not only for text, but also for other elements.

This is the cleanest solution I have found (IE9+) and adds a fix for the "off by .5 pixel" issue by using transform-style that other answers had omitted.

.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .element { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

<div class="relative"><!--used as a container--> <!-- add content here to to make some height and width example:<img src="" alt=""> --> <div class="absolute"> <div class="table"> <div class="table-cell"> Vertical contents goes here </div> </div> </div> </div> .relative{ position:relative; } .absolute{ position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); } .table{ display:table; height:100%; width:100%; text-align:center; color:#fff; } .table-cell{ display:table-cell; vertical-align:middle; } 

Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top