css centering items

Question

Possible Duplicate:
css vertical centering

I'd forgotten just how difficult it is to center things in CSS.

In the attached code I am trying to vertically align both the Image and the TitleText or maybe the whole "innersection" div if that is easier. Also trying to horizontally align the TitleText within the remaining space left after the image has been aligned to the left.

<html>
<head>
    <style>*{margin: 0; padding: 0;}</style>
</head>
<body>
    <div id="header" style="position: absolute; top: 0px; height: 8em; width: 100%; background: grey;">
        <div id="titlesection" style="height: 6em; background: green;">
            <div id="innersection" style="margin-top: auto; margin-bottom: auto; background: yellow;">
                <iimg src="images/burgee.jpg" style="vertical-align: center;">
                <span style="width: 100%; margin:0 auto; text-align: center; font-size: xx-large; background: teal;">TitleText</span>
            </div>
        </div>
        <div id="menu" style="position: absolute; bottom : 0px; height: 2em; width: 100%; background: lightblue;">
            menu goes here
        </div>
    </div>
</body>
</html>

Almost there. I couldn't just give up and use a table instead, would have been too easy.

Currently have the code below which partly works but... When I use a div for the TitleText it centers horizontally but is not exactly vertically inline with the image. Change to a span instead (without float: left) and vertical alignment is correct, just that then because a span doesn't span the whole width of the header the text is no longer centered.

So near but so far! Can anyone see how to get this working.

Thanks,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <style>
            .VCentOuter {
                top: 0; left: 0; width: 100%; height: 100%; position: absolute; display: table
                }
            .VCentInner {
                display: table-cell; vertical-align: middle
                }
            #header{
                height: 17em;
                width: 100%;
                }
            #header img {
                margin: 1em;
                }
            #title{
                width: 100%;
                text-align: center;
                color: Red;
                font: bold italic xx-large "Century Gothic", "sans-serif";
                }
        </style>
    </head>
    <body>
        <div id="header">
            <div class="VCentOuter" style="height: 15em; background: green;">
                <div class="VCentInner" style="background: blue;">
                   <img src="images/burgee.jpg" style="vertical-align: middle; float: left;"/>
                   <div id="title" style="width: 100%; background: pink;">TitleText</div>
<!--
                   <img src="images/burgee.jpg" style="vertical-align: middle"/>
                   <span id="title" style="width: 100%; background: pink;">TitleText</span>
-->
                   </div>
            </div>
        </div>

    </body>
</html>

"You wrote *In the attached code* but you forgot to attach something." — alex, Mar 24 '11 at 23:42
Yea, just trying to do that now. Question is how do I attach code here? — NickC, Mar 24 '11 at 23:45

Damb · Answer 1 · 2011-03-25T11:10:50.713

1

Ad vertical centering: You don't specify the centering relation.. what do you want to center agains? Page? Or just parent div? Anyway.. there are many scenarios, so check these articles:
In the woods
basics {at jakpsatweb}

edit: added float to img, so title is centered in remaining space, not whole block

latest version:

<html>
<head>
    <style>
        body {margin:0;}
        #header {height:200px; background-color:#EEE;}
        #titlesection {height:170px; background-color:#DDD; position:relative;}
        #innersection {height:60px; background-color:#CCC; position:absolute; top:50%; margin-top:-30px; width:100%;}
        #innersection img {float:left; width:200px; height:60px;}
        #innersection h1 {margin:0; font-size:20px; line-height:60px; text-align:center;}
        #menu {height:30px; margin:0; padding:0;}
        #menu li {float:left; display:block; margin-right:10px;}
    </style>
</head>
<body>
    <div id="header" >
        <div id="titlesection" >
            <div id="innersection" >
                <img src="images/burgee.jpg">
                <h1>Title text</h1>
            </div>
        </div>
        <ul id="menu">
            <li>Menu item</li>
            <li>Second menu item</li>
        </ul>
    </div>
</body>
</html>

As header is usually fixed, I went this way. You can set fixed height to title section and set its position to relative. Then the innersection is as high as image is (manyally set in css). Vertical centering of text is done by using position absolute technique with margin-top set to 50% (so top edge of heading's block is going to be centered).. now you just need it half its height up, to make it centered in relation with parent div (innersection).
Ugh.. not a simple explanation I guess.. code should explain it better :)

edited Mar 25 '11 at 11:10

answered Mar 24 '11 at 23:53

Damb

14,410
6
47
49

btw: Is your html strucure fixed? Or can you rewrite it? Seems a bit chaotic. Also could you specify a bit more how the result should look? – Damb Mar 25 '11 at 00:22
HTML structure can be changed if you have any better suggestions. Further explanation of what I am trying to achieve: Header section at top of page. T bottom of Header section a section containing a drop down menu. Above that a section (vertically centered in remaining space) with an image to the left and some title text centered in the area to the right of this. – NickC Mar 25 '11 at 09:39
Ah, ok then. I guess you can use fixed height for the whole header and also for navigation bar, right? This should be quite simple. Give me a moment, to prepare code :) – Damb Mar 25 '11 at 09:44
Yes, fixed height for whole header and fixed height for nav bar. Just image which might change, hence reason for trying to make centering automatic rather than based on fixed image height. – NickC Mar 25 '11 at 10:37
Edited my answer with latest code version. Well.. being dynamic is a bit harder. But there should be at least some maximum height, that is used for image (like you accept a maximum of 200px height image). Then you can use the same centering technique as is used for innersection. But you will have to adjust negative margin of image every time you change image. – Damb Mar 25 '11 at 10:51
But it is weird anyaway. I would like to know in what scenario will you need dynamicaly resizing image in header? – Damb Mar 25 '11 at 10:54
Intention is for heaedr image to be served by PHP from database, it will change at different times rather like the google logo does at different times of year. – NickC Mar 25 '11 at 11:23
But it's just sometimes and I would say they keep the size of image still same, or just make fixed margin-top. Also... you can also dynamically generate different values for css by php. If there would be an easy way how to do this dynamically, you would already get the answer imo. Good luck anyway. – Damb Mar 25 '11 at 11:35

score 0 · Answer 2 · answered Mar 24 '11 at 23:46

0

Make a wrapper for whatever you want to center.

.wrapper {
  width:960px;
  margin-left:auto;
  margin-right:auto
}

answered Mar 24 '11 at 23:46

Diodeus - James MacFarlane

112,730
33
157
176

Haven't I already got that in the tag? – NickC Mar 24 '11 at 23:51
Sorry, posted before you had your code. – Diodeus - James MacFarlane Mar 25 '11 at 00:07

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

Please check the following post:

CSS: Standard (dynamic) way to centralize an element in the y-axis

There are references in my answer that may be useful, and several people posted possible solutions to the x/y-centering using CSS problem.

edited May 23 '17 at 12:11

Community

1
1

answered Mar 25 '11 at 01:35

Marc Audet

46,011
11
63
83

css centering items

3 Answers3