Vertically and horizontally align
Posted
by
user1760649
on Stack Overflow
See other posts from Stack Overflow
or by user1760649
Published on 2012-10-19T22:53:50Z
Indexed on
2012/10/19
23:01 UTC
Read the original article
Hit count: 259
My problem is the following:
I've vertically centered a div. However, I'd like to center another div horizontally. The problem is that I don't manage to center it horizontally.
(X)HTML:
<body>
<div id="strut"></div>
<div id="page">
<div id="inner_page">
<h1>Galidie "jQzz" Clément</h1>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#strut, #page {
display: inline-block;
vertical-align: middle;
}
#strut {
height: 100%;
}
#page {
border: 1px solid #c00;
}
#inner_page {
width: 750px;
margin: 0 auto;
background-color: #c00;
}
h1 {
text-align: center;
margin: 0;
}
strut is the marker for vertically center an element. page is centered vertically. The idea is to try to center horizontally the inner_page block.
Should I use absolute position? Or anything else? Did I choose the good method?
Thank for your futur help.
© Stack Overflow or respective owner
