Failing to centre... |
Failing to centre... |
Brian Chandler |
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! |
Christian J |
Jul 29 2021, 12:37 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. |
Brian Chandler |
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. |
Lo-Fi Version | Time is now: 25th April 2024 - 12:22 PM |