Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Failing to centre...

Posted by: Brian Chandler Jul 29 2021, 05:17 AM

Probably an elementary question, but I am working on the footer for my new shop; you can see an example here:
https://imaginatorium.com/moomin.html

At the bottom there are two boxes (blue and red) for the footer buttons: here is the css

CODE

DIV.ftrlinks {
    clear: both;
    width: 50%;
    margin: 0 10em;
border: solid 1px blue;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.2em;
    padding: 0;
}

DIV.test {
    clear: both;
    width: auto;
    margin: 0 25%;
border: solid 1px red;
    margin: 0.2em;
    padding: 0;
}

On the ftrlinks div I set the width to 50%, which has the intended effect, then margin auto in the horizontal direction is supposed to move it to the centre, but doesn't. What have I misunderstood here? (I feel I have spent 20 years writing margin: 0 auto to centre something...)

Then on the second (test) div I tried setting margin to 25%, which does not seem to work at all.

Intuitively I think of % as a proportion of the including box, but this only works horizontally (or something equally ccsish). FWIW this is contained within div footer as follows:

CODE

DIV.content {
min-height: 80vh;
}

No width specified, but the diagnostic thingy says width computed as 15xx pixels, so it cannot surely be zero. Help!

Posted by: Christian J Jul 29 2021, 12:37 PM

QUOTE(Brian Chandler @ Jul 29 2021, 12:17 PM)

On the ftrlinks div I set the width to 50%, which has the intended effect, then margin auto in the horizontal direction is supposed to move it to the centre, but doesn't.

There are two margin rules, but none of them use the value "auto".

QUOTE

Then on the second (test) div I tried setting margin to 25%, which does not seem to work at all.

There's a second margin rule overriding the first.

QUOTE

No width specified, but the diagnostic thingy says width computed as 15xx pixels, so it cannot surely be zero. Help!

I think "computed" means the rendered value (that depends on browser window size, etc). Try changing window size and see if the value changes too.

Posted by: Brian Chandler Jul 29 2021, 01:28 PM

Crumbs, brian^h^h^hain must have gone on holiday. I changed it to margin: 0 auto, and it (the first, blue box) does indeed work.

And the red one! Thanks Christian.