Vertically center content of floating div

Question

How do I verically center the content of floating div (which height I don't know)?

There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/)

<div class="floating">
    This should be in the middle
</div>
​
.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
    vertical-align: middle;
}   ​

How do I make the sentence "This should be in the middle" appear really in the middle (vertically centered)? vertical-align: middle does not seem to work. I have tried display: table-cell and it didn't work either. What's the best way to solve this issue? I'd like to avoid inserting any other HTML tags, do it just via CSS.

(Just to make it clear: I don't know the actual height of the container, 100px is just for the example)

EDIT: I'd like you to understand me, so... Always when I design web page, I follow the rule that HTML holds the content and CSS is responsible for the visual style. I never mix them up together or use one just to enable the other. In this case, I want to stick with this rule too. I don't want to insert HTML element just for the CSS.

Wallywalnut

ok, you can't add element / you can't use JS / you can't use fixed height. Boy, now I want to know the answer too. – Miscarry

@pavel-s - "I follow the rule that HTML holds the content and CSS is responsible for the visual style". Actually, adding a paragraph <p> around the text is actually semantically correct HTML. – Lutenist

Answer 1

The others are right, you need to nest two DOM elements which gives you more options controlling the centering. Here's the code:

.floating {
  display: table;
  float: right;
  height: 200px;
  width: 400px;
  border: 1px solid red;
}
.floating p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

<div class="floating">
    <p>This is the proper way that validates and breaks across multiple
    lines, if the text is longer than just a few words and still
    should be vertically centered. Here, it's also horizontally
    centered for added joy.</p>
</div>

Crosby

It does not work, you forgot about float (after adding it, the content is aligned to top). – Gober

To me, this misses the point of floating text... shouldn't it be an example of text which is centered and floating beside something else? – Flagellant

Answer 2

Add the text inside a <p>.

HTML

<div class="floating">
    <p>This should be in the middle</p>
</div>

CSS

.floating {
    height: 100px;
    border: 1px solid #f00;
    display: table-cell;
    vertical-align: middle;
}
​

Lutenist

Well, that's exactly what I want to avoid: inserting another element between the content and the existing div. Does it happen to be any other solution? – Wallywalnut

Answer 3

If you know the height, then

line-height:100px;

If not, use javascript to set line-height after rendering.

http://jsfiddle.net/DeH6E/4/

Miscarry

Nonono, both fixed height and javascript are the solutions I want to avoid at all costs (in this case). – Wallywalnut

Answer 4

I was also looking for a solution to this and eventually came up with this:

http://jsfiddle.net/w6j9mgjp/1/

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: "a";
    display: block;
    visibility: hidden;
    height: 50%;
    margin-top: -.7em;
}

it only works for a single line of text, though.

Funke

Answer 5

http://jsfiddle.net/DeH6E/2/

the text inside of your div needs to be in its own div tag, and that div tag needs to be set to display:table-cell; and vertical-align:middle; while your .floating div needs to be set as display:table;

or you can set a p tag or some other sort of formatting tag in there to contain your text, eg span, or p

Naked

Well, that's exactly what I want to avoid: inserting another element between the content and the existing div. Isn't there any other solution? – Wallywalnut

No, there is a way that's super complicated and highly unprofessional to do that requires padding top and bottom using percents but otherwise nope. – Naked

Christian, I'm not entirely sure thats true, upon viewing your picture the text is still aligned at the top of the div. – Naked

Answer 6

Just play with the pseudo selector.

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

Hulking