The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Failing to centre...
Brian Chandler
post Jul 29 2021, 05:17 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 29 2021, 12:37 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jul 29 2021, 01:28 PM
Post #3


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:24 PM