- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Greetings
I have a problem vertikal centering an responsive object at my page: Website
After the slider i have a container box, whose height is decided by the two boxes inside it. It’s different depending on the screen size which box is tallest.
I want the box that is not deciding the height to always be centered vertical.
For now i’ve given the text box position: absolute; margin top and bottom: 50%; but this is only centering the top and not the middle of the box.
Since it’s responsive the text box doesn’t have a fixed height.
What can i do?
Cheers
You can try use flexbox see this answer http://stackoverflow.com/questions/15726740/vertically-centre-items-with-flexbox
Or you can do it with code. Get the height of the box with javascript maybe also listen to the window resize event to make sure it is up to date. Then with postion: absolute and top: 50% have the margin-top be negative half the height of the box. eg #box{
position: absolute;
top:50%;
margin-top: -50px; /* if the height is 100px */
}
Hi
Thanks for you reply.
Flexbox looks really clever, but not supported in IE7+8+9, so I don’t think that’s the solution and I don’t work with javascript so I’m a bit fucked :P
I can’t believe there is no regular CSS method for doing this.
With no changes to HTML:
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
padding-top: 90px; /* .navbar height */
vertical-align: middle;
}
.navbar {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
And you may be lucky enough to see it working on IE8 as well.