Vertically center unknown length of text inside a div

Question

I want to center an unknown length of text (ok it's limited to a certain size, but I don't know if it needs one line or two lines) inside a div. Therfore I cannot use line-height. I tried to use display: table-cell, but than the layout is destroyed. I cannot use some tricks with top because I need this for positioning.

Here is an example.

Mockup:

Mockup

Original code:

HTML:

<div class="background">&nbsp;</div>
<div class="TileText">MyText - Another long, long, long text</div>

CSS:

.background{
    background-color:#000;
    height: 400px;
    width: 100%;   
}

.TileText{
    position: relative;
    top: -135px;
    max-width: 200px;
    height: 80px;
    background-color: #FFF;
    color: #black;
    clear: both;
    padding-left: 10px;  
}

Current state:

HTML:

<img src="images/castle.png" width="300" height="333" title="Castle" alt="Castle" />
<div class="TileTextWrapper">
    <div class="TileText">Text</div>
</div>

CSS:

.TileTextWrapper{
    position: relative;
    top: -135px;
    max-width: 200px;
    height: 80px;
    background-color: #FFF;
    color: #57abe9;
    clear: both;
    padding-left: 10px;
    display: table;
}

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

Update:

Now the text is vertically aligned. But I'm afraid display: table would only work with modern browser.

Browser compatibility of `display` property: http://reference.sitepoint.com/css/display#compatibilitysection — Zul, Jan 18 '12 at 18:36
This method of centering with display: table will definitely work in IE8 and up. — HandiworkNYC.com, Jan 18 '12 at 18:37
Check out http://css-tricks.com/centering-in-the-unknown/. Works well, and if you want it to work with older browsers you just need to add an element into the code instead of using `:before`. — Michael, Jan 18 '12 at 18:45

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

I've updated your fiddle:

It seems to work

see: http://jsfiddle.net/hSCtq/11/ for reference.

I would put .TileText inside of .background. Creating an empty div for the sake of a background image is not semantically correct, and not necessary in most situations. One situation for a separate background div would be if you need to set the opacity of a background image separately from the content.

<div class="background">
    <div class="TileText">MyText - Another long, long, long text</div>
</div>


.background {
    background-color:#000;
    height: 400px;
    width: 100%;   
    display: table
}

.TileText{
    max-width: 200px;
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    clear: both;
    padding-left: 10px;  
}

Other questions with the same answer.

Horizontally and vertically center a pre tag without the use of tables?

The old center a image in a div issue ( image size variable - div size fixed )

Also, the first result from googling "center vertical text css" will give you the same code structure I posted in my JSfiddle

edited May 23 '17 at 12:30

Community

1
1

answered Jan 18 '12 at 17:45

HandiworkNYC.com

10,914
25
92
154

1

take it easy on the negative voting. JS-Fiddle didn't update my code like I thought it had. Just trying to help but the negative voting doesn't encourage me to do so. Thanks. Considering *that there is no* code posted in the original answer for future reference, updating the jsfiddle is a totally reasonable response to the question. – HandiworkNYC.com Jan 18 '12 at 17:51
I didn't downvote you. I will also update my question with code. But I see you removed the positioning of my div, but I want to keep it. In addition, `.background` has an error with `display: table`. – testing Jan 18 '12 at 17:55
Either you miss a `;` or you mean `display: table-cell;`. But I have to test your code first. – testing Jan 18 '12 at 18:02
Again, downvoting the answer 60 seconds after it's been posted is not constructive. – HandiworkNYC.com Jan 18 '12 at 18:02
jsfiddle was being buggy in updating the code... the current link in the answer centers the text successfully... or you can look at the fiddles from the duplicate questions. http://jsfiddle.net/hSCtq/11/ – HandiworkNYC.com Jan 18 '12 at 18:03
As I said I haven't voted now. In reality, I'm not using the div. Instead there is an image, but I don't wanted to include an image, because a div should also do the job. Still must look through the code ... – testing Jan 18 '12 at 18:08
The comment was addressed to whomever downvoted... not to you if you didn't downvote. It might help if you include a mockup of the layout you're trying to achieve. Thanks – HandiworkNYC.com Jan 18 '12 at 18:10
I added an mockup to my question. I also included my current code (but only a snippet to reduce complexity). – testing Jan 18 '12 at 18:20
I personally think that just posting a link to a jsfiddle without any supporting rationale in the body of the question constitutes a generally poor answer, no matter how much awesomeness is contained within the fiddle itself. That was why I downvoted it initially, but have since upvoted instead. – Chris Farmer Jan 19 '12 at 16:01

score 1 · Answer 2 · answered Jan 18 '12 at 18:21

Add a <p> tag inside your TileText div :

HTML

<div class="background"> &nbsp; </div>
<div class="TileText"><p>MyText - Another long, long, long text</p></div>

CSS

.background{
    background-color:#000;
    height: 400px;
    width: 100%;   
}

.TileText{
    position: relative;
    top: -135px;
    max-width: 200px;
    height: 80px;
    background-color: #FFF;
    color: #black;
    clear: both;
    padding-left: 10px; 
}

.TileText p { 
    position:absolute;
    display: table-cell;
    vertical-align: middle

  }

Example here: http://jsbin.com/ubixux/2/edit

score 0 · Answer 3 · answered Jan 18 '12 at 17:42

0

You must add display:table-cell; and also add vertical-align:middle;

answered Jan 18 '12 at 17:42

Where should I add this? If I add this to `.TileText` than the text is centered, but the div is displayed at the bottom. – testing Jan 18 '12 at 17:50
So what you want is for the text to be centered in the div in addition to the div being centered vertically in relation to the page? – Jan 18 '12 at 18:27
The div should not be centered vertically, but I want to define the position for the div (as in my code). – testing Jan 18 '12 at 18:29

score -1 · Answer 4 · answered Jan 18 '12 at 17:55

To achieve vertical alignment, you have to use table. You can write your code as this:

 <div style="width:600px; height:600px; border:#000000 1px solid;">

    <table style="width:100%; height:100%; vertical-align:middle">
        <tr>
            <td>
    MyText - Another long, long, long text
            </td>
        </tr>
    </table>
</div>

Vertically center unknown length of text inside a div

4 Answers4

Linked