Vertical alignment of text and a div inside another one

Question

HTML

<div id="divTop">divTop</div>
<div id="divBottom">divBottom
<div id="divCenter">divCenter</div>
</div>

CSS

html, body{
    height:100%;
}
#divTop{
    height:50px;
    background:#008080;
    color:#ffffff;
    text-align:center;
    vertical-align:middle;
}
#divBottom{
    height:100%;
    text-align:center;
    vertical-align:middle;
    border:thick solid blue;
}
#divCenter{
    width:50vmin;
    height:50vmin;
   border:medium solid red;     
}

I want: divCenter to be centered both horizontally and vertically inside divBottom and also text inside all divs to be vertically centered.
Please, help.

jsfiddle is here

score 1 · Accepted Answer · edited May 23 '17 at 11:49

Hi SunSky I forked your fiddle and made this one, you can use transformation properties to rotate the text. This should work in webkit browsers, mozilla, opera and IE9. I didn't try it on earlier versions of IE but it should work at least in IE versions 7 and 8. The transform property works with the browsers mentioned except <=IE8 for IE 7,8 I put css property writing-mode:tb-lr; and text-orientation:sideways-lr; to get the desired effect in these older IE browsers. You will have to play with those values to get what you really want. With transformations it's easier since you only have to rotate it to the point you want it, if you want to center it or move it from the edges of the divCenter just use paddings, to center the box you use margin-left:auto; and margin-right:auto; for these to work you need to have a width set you can use 100% here's the jsfiddle so you can see the code, and also here's W3 writing-mode documentation. I hope this helps if you have any more questions or comments feel free to ask/comment.

EDIT:

I did not read the question carefully I will leave the info behind just as additional info on text transformations to create vertical text. To center vertical text you can check out thi link It's about how to vertically align and how not do it the final examples are proably the one's you're looking for, if that does not work there's some questions on Stackoverflow that can help you here are the links:

Vertically Align text in a Div Has some links to more information.

How do I vertically align text next to an image with CSS? For this one check the second answer it's simple and gives some good tips and ways of archieveing what you want. I hope this helps and that this is what you really wanted. Here's the latests jsfiddle it should work like you want, what you have to do is set a height and width to center vertically then put 50% for the top property and then for the margin-top property put the negative half of the height of the div you want to center. If you need to apply this alignment to all divs just use the CSS properties in each corresponding div or for easier code create a class (HTML <div class="foo"></div> CSS .foo{}) with these properties and just add it to elements that you want the text vertically aligned.

Samuel, thanks for your efforts, especially about transformation features. But, you're probably missed some part of my post. I need the text inside all divs make vertically `centered`, not vertically `oriented`. It means horizontally placed, but top and bottom margin should be equal. Also the `center` div itself should be vertically centered inside its parent. Could you try, please ? — qadenza, Jul 15 '13 at 18:31
Oh you're right SunSky I will take a further look into it and post an aswer as soon as I can. — Samuel Lopez, Jul 15 '13 at 18:42
`divCenter` is not vertically centered in your jsfiddle, but I hope i will solve that using your links. Thanks a lot. Let's say - solved. — qadenza, Jul 15 '13 at 19:07
No problem I did a last modification on the jsfiddle if you want to check it out using another technique this one should be the one you need. — Samuel Lopez, Jul 15 '13 at 19:32

Vertical alignment of text and a div inside another one

1 Answers1