HTML & CSS How To Center Items in A Div?

[StuMur]

Hi,

I'm a total No0b and this is my first post, my apologies if I'm doing this incorrectly?!

I've spent days using Google Chrome Dev Tools trying to work out how to center some items on a webpage on my small live bands site. Could someone pls advise me on the most suitable way to achieve this, in fairly basic terms!, if that's at all possible? Essentially, I have a div with two main columns, and the column on the right, when viewed on a phone screen, justifies to the left side of the page, rather than the middle. It looks alright when viewed on a regular monitor, but when it's viewed on a phone screen, even though it's a mobile responsive WP theme, it sits on the left side, rather than the center - so cleasrly I've got it set up wrong somewhere. In the div in question, it's basically a jpg photo box, an mp3 player, a few bits of text, a contact form, and an Addthis section. Here's one of the webpages:

https://affordaband.co.uk/the-herbz/

Sorry, I'm not sure how I'm supposed to provide the info. Is this web link acceptable?

Thanks So Much, StuMur

 

[Ghost]

Yes setting a div to margin with a 0 auto is the best way to center any thing on a page. You can also try flex box and do a search on that if you want to challenge yourself to get better at being responsive. Of course it's not hard or anything if you know CSS.

You can also try clear: both; which will make sure nothing can float beside either left or right side

Yeah margin:auto is a great tool and works as long as the parent container has a width (100% for example).

You can also try things like...
position:absolute;
margin-left:50%;
transform:translateX(-50%);

However, that is a better trick for VERTICAL centering rather than horizontal, with margin-top:50% & translateY(-50%)