Vertically and horizontally align
- by user1760649
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.
Here are my (X)HTML and CSS
(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.
