It isn’t clear whether you want the centred item to be central on the whole line or central in respects to the space available?
CSS will only normally centre the middle content in respect to the space it has available. For example if you have 200px content on the right and then 100px content on the left then the centred position is shifted 50px to the left. It would not be in the same position had no elements been either side.
You could absolutely place the elements to the side and then they take up no space in the flow and then the other elements would remain central as if they were the only elements on the line. Of course this means that at some point things will overlap.
CSS even with flexbox and grid cannot do this normally as they will all centre in respect to the space available unless you give arbitrary matching widths to the side elements.
However depending on situation you can achieve this assuming that you don’;t need the side items to wrap. here is the simplest example using CSS grid (we don’t use floats for positional layout these days).
You can do it with flexbox but it gets more complicated.
If you meant that you only wanted the item centred in the available space rather than centre of screen width then that’s normal behaviour with the right structure.
You can see that the centred text is slightly offset from the centre depending on its content on right or left.
This had the same effect as text-align: center, so that can be used in its place, if that is the effect you wanted.
The OP’s requirements are not clear to me, but it seems a little more complex than text alignment.
Thanks a bunch, everyone. From what’s described here I am after the default centering it’s just not working for me (tested in Safari, Chrome, and Firefox but all on an apple silicon MacBook so maybe an ARM issue affecting my browsers?)
margin: 0 auto; should work but does not
At least now I’m on the right trail. I’ll test it on my roommate’s PC tomorrow.
I’m guessing that it will most likely be that you have the wrong css or html
You can see from the demos above that if you have the right code it will work ok.
That doesn’t work to centre floats or block elements. It only works on block elements that have a width defined. It will work on flex items in the right context without widths and will work on display:table elements without widths.
If you post the full code and html that you have tried we can fix it for you as it shouldn’t be that difficult (taking into account the caveats already mentioned).
Yea I’m assuming it’s my code, whenever I try to use your examples it causes a line brake shifting the right floats down a line, or doesn’t center. I’m hacking away at it if I can’t figure it out by the end of the day ill post my code (Pissing me off that I can’t figure it out myself) I thought being an app developer would mean it would be easy to pick up web development. Turns out it’s really hard to debug without experience
tested with and with out. with floats causes the line break without causes the item I want entered to be on the left. Its probably something simple I’ve overlooked are there any debug tools for html like you get with Xcode or Visual studios?
The browser developer tools are your lifeline as you can tweak things and see what does what. However you do really need to know how things work (at least in theory) as CSS is a stickler for doing what its told rather than what a developer expects it to do
If you are still using a floated example then check out the floated example in my codepen as it should match your html pretty closely.
At least you are trying which is more than some people do
Unrelated question why do you have two body tags rather than one in the css why not integrate them into one? I didn’t even know you could declare them twice like that
body {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
}
Thanks everyone especially PaulOB. Ive got it working now, I scrapped the css and started from scratch. makes me think I missed a ; somewhere even though I checked multiple times.
I don’t have two body ‘tags’ but I do have two selectors for the same body element in the CSS.
You can use the same selector multiple times if you wanted and the rules would all cascade as required. Where there are conflicts the latest rule would win out.
The code you mention is actually this:
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
}
I negate the margin and padding defaults from the html and body elements. I do this by default on all pages I use so like to keep them separate.
The font style for the body element is in its own rule because I didn’t want to combine styles in the previous rule block as that would also style the html element (although for a font that wouldn’t have mattered). The previous rule is in a comma separated list so you only want the common styles in a comma separated list.
You can use the selector as many times as you want but generally you would keep all the rules together in one block but when you have media queries you could end up redefining the element many times in different ways.
