CSS: Center text both horizontal and vertical?

Question

Im creating a new website and i need to know something(will show with example).

Lets say i did this:

html;

<div id="center-in-bar">
   <ul>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
       <li>content..</li>
</div>

and css:

#center-in-bar {
   list-style:none;
   display:inline-block;
   /*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}

What do I do to make all the li elements centered both horizontal and vertical? In the center-in-bar element?

Any help would be appriciated :))

vertical centering is not a very easy task and the approach to acheiving it depends on certain criterion (there are a few different methods but each has conditions). — Matthew Cox, Nov 18 '11 at 18:32

score 11 · Accepted Answer · answered Dec 12 '11 at 15:55

Try this CSS snippet:

#center-in-bar ul {
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}
#center-in-bar li {
    ...
    display:inline; /* you might want to use this instead of "inline-block" */
    ...
    text-align:center; /* center horizontally */
    vertical-align:middle; /* center vertically */
    ...
}

James Johnson · Answer 2 · 2011-11-18T18:45:41.487

Somehow, there's still no standard for doing this, but in my experience the following is probably the most reliable solution overall:

<style type="text/css"> 
    #container {     
        display:table;     
        border-collapse:collapse;   
        height:200px;   
        width:100%; 
        border:1px solid #000; 
    }          
    #layout {     
        display:table-row;    
    }            
    #content {     
        display:table-cell;   
        text-align:center;  
        vertical-align:middle;     
    }            
</style>      
<div id="container">     
    <div id="layout">     
        <div id="content">  
            Hello world!  
        </div>      
    </div>    
</div>

Here's another technique that utilizes relative and absolute positioning to simulate centered-middle position. This technique is not exact, but it should be compatible with any browser (even the early ones):

<style type="text/css">
    #vertical{ 
        position:absolute; 
        top:50%; /* adjust this as needed */     
        left:0; 
        width:100%; 
        text-align:center;
    } 
    #container {
        position:relative;
        height:200px;
        border:1px solid #000;
    }
</style>         
<div id="container"> 
    <div id="vertical"> 
        Hello world! 
    </div>               
</div>

Important note:

When this question gets asked someone always seems to suggest line-height as a solution, but I would implore you to steer clear of that suggestion. It looks good when you're demonstrating something simple like "Hello World," but line-height breaks horribly when the text wraps.

Should note that `table-cell` method does not work in certain versions of IE. — Sparky, Nov 18 '11 at 18:35
No problem. Don't forget to mark the answer if you're satisfied. — James Johnson, Nov 18 '11 at 18:49

score 0 · Answer 3 · edited May 23 '17 at 12:02

0

You should give same value to line-height and height.

#center-in-bar li
{
height: 30px
line-height: 30px;
text-align: center;}

also look at this: Text align vertical within li

edited May 23 '17 at 12:02

Community

1
1

answered May 25 '12 at 11:50

efirat

3,679
2
39
43

score 0 · Answer 4 · answered Nov 18 '11 at 19:31

HOW TO HORIZONTALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)

Let's say you wanted to center a document on a browser page, so that no matter how big you resize your browser the element is always centered:

    body {
     margin:50px 0px; padding:0px;
     text-align:center;
    }

    #Content {
     width:500px;
     margin:0px auto;
     text-align:left;
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;
    }

write this HTML for centering something horizontally in between your body tags:

<body>
<div id="Content">I am a centered DIV</div>
</body>

This will horizontally center block level elements. To center text, spans, or other inline elements all you would need to add is:

    #Content {
     width:500px;
     margin:0px auto;
     text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;

    }

HOW TO VERTICALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)

Note: Do not use line-height to vertically center elements, as it will only work for one line of text and nothing more.

As for vertically centering items, there are 3-5 methods you can use depending on what it is you are trying to center.

This site describes each method easily for you: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Best of luck!

The blog is no longer working (pathetic of themeforest to not do 301, what a poor SEO team they have) any chance of a jsfiddle — TheBlackBenzKid, Jul 27 '18 at 13:43

CSS: Center text both horizontal and vertical?

4 Answers4

Linked