• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How To Center Items in A Div?

StuMur

New Coder
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
 

Master Yoda

Administrator
Administrator
Verified
Hello @StuMur! Welcome to Code Forum!

No need to apologize! We're here to help!

So I think this is happening due to padding you have on your class "bandblock" of 15px. I suggest removing that padding and it should look a little better.

You can do this by editing you css and editing the highlighted code.
CSS:
.bandblock {
    padding-right: 15px;
}
Edit: can you actually point out what needs to be centred via screenshot?
 
Last edited:

StuMur

New Coder
Edit: can you actually point out what needs to be centered via screenshot?
Thank you Master.. screenshot - that's a great idea! Attached.. It's actually the centering on a mobile phone screen I'm trying to work out, so I've attached that screenshot.. It's a Wordpress mobile responsive theme, but for some reason, the things in this div don't center on a phone screen, they just sit over on the left side, and so far I can't work out why that is.
 

Attachments

  • Screen Shot 2020-02-12 at 12.54.59 am.png
    Screen Shot 2020-02-12 at 12.54.59 am.png
    46.7 KB · Views: 4
  • Screen Shot 2020-02-12 at 12.59.35 am.png
    Screen Shot 2020-02-12 at 12.59.35 am.png
    26.7 KB · Views: 4

Master Yoda

Administrator
Administrator
Verified
Reviewing the code some more I noticed that for .sidebar-stuff you have a max width, I'd recommend add @media below then add width to 100% so it knows that on media display this.
 

StuMur

New Coder
Reviewing the code some more I noticed that for .sidebar-stuff you have a max width, I'd recommend add @media below then add width to 100% so it knows that on media display this.
Thanks so much mate. I understand the "add width to 100%" bit - but I haven't got a clue what you mean with the "add @media below" bit.. God, I'm sooo bad at this! :-D
 

Master Yoda

Administrator
Administrator
Verified
Thanks so much mate. I understand the "add width to 100%" bit - but I haven't got a clue what you mean with the "add @media below" bit.. God, I'm sooo bad at this! :-D
You're welcome and no worries. When I help coders I try to point them in the right direction so that they can try to figure it out because I simply don't want to just share the code and have them be like okay how does this work!

However, by @media we're pretty much saying "Hey you mobile browsers, use this css." so for an example on how to use it.

CSS @Media:
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}
 

StuMur

New Coder
You're welcome and no worries. When I help coders I try to point them in the right direction so that they can try to figure it out because I simply don't want to just share the code and have them be like okay how does this work!

However, by @media we're pretty much saying "Hey you mobile browsers, use this css." so for an example on how to use it.

CSS @Media:
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}
Thanks a lot MY. Yes, I agree.. I've learned loads in the last few weeks just picking things to bits on Google Chrome Elements.. it's astounding. Still years to go though for me.. :-/ But I've made huge strides in a short time, so all good. This one has me perplexed atm, but I'll press on. I'm not sure where I'm meant to exactly place that code you kindly gave me there, but I figure somewhere in the style.css sheet?
 

Master Yoda

Administrator
Administrator
Verified
Thanks a lot MY. Yes, I agree.. I've learned loads in the last few weeks just picking things to bits on Google Chrome Elements.. it's astounding. Still years to go though for me.. :-/ But I've made huge strides in a short time, so all good. This one has me perplexed atm, but I'll press on. I'm not sure where I'm meant to exactly place that code you kindly gave me there, but I figure somewhere in the style.css sheet?
Hey practice makes perfect! Code Forum will always be a community for you and others learning to code.

So really anywhere in the style.css, just to place it right underneath the .sidebar-stuff if you can.

If you need more help you can review https://developer.mozilla.org/en-US/docs/Web/CSS/@media

But, you should have something similar to this: (If you want to see):
CSS @Media:
@media screen and (min-width: 900px) {
  .sidebar-stuff {
    max-width: 100%;
  }
}

Note you may have to change (min-width: 900px) to (max-width: 900px).
 
Last edited:

StuMur

New Coder
That code is great, thanks mate. It seems to center the mp3 player ok, and all the other stuff in that div seems to be impervious to it.. maybe it only works on media thingys, or more likely, I'm screwing it up! :blush: Anyway, 3am here in Australia atm - I have 16:9 eyeballs and sticks holding my eyes open, so I'll try again tomorrow. Mate, that Mozilla page is pure gold, btw. Thank you so much for giving me so much guidance - see if I can figure it out tomoz. Cheers Master - guys like you are pure gold.
 

Master Yoda

Administrator
Administrator
Verified
You'll probably have to edit their CSS because something could be conflicting. We can go over this tomorrow when you get back on. Mozilla is an incredible resource and be sure to use it. You are very welcome, hope to see you see around more!
 

StuMur

New Coder
Dang it. I'm done. Three more full immersion days on it reading everything, changing everything in Chrome Elements, and I still can't make this work.. what an ordeal. Mate, I don't know how you guys do it. I'm no Bill Gates for sure.. (er, does he do coding?!?!) :geek:
 

Master Yoda

Administrator
Administrator
Verified
Dang it. I'm done. Three more full immersion days on it reading everything, changing everything in Chrome Elements, and I still can't make this work.. what an ordeal. Mate, I don't know how you guys do it. I'm no Bill Gates for sure.. (er, does he do coding?!?!) :geek:
Hahah you just got to keep going at it. I had to do a similar thing these last couple days. Hence why I haven’t been really here lately lol. Just keep going.
 

Master Yoda

Administrator
Administrator
Verified
.sidebar-stuff:
.sidebar-stuff {
    display: inline-block;
    max-width: 222px;
    float: left;
    padding-left: 33px;
}
Remember this is affecting your mobile appearance. You need to use the @media to adjust to mobile screens.
 

StuMur

New Coder
Just keep going. Remember this is affecting your mobile appearance. You need to use the @media to adjust to mobile screens.
Haha.. yep.. you know I will! I'll solve it at some point. Thx for the css mate.. I think the confusing bit still for me as a rank amateur is that it seems I also need html code as one can't go without the other.. is that about right? Exponential trial and error is ageing me in dog years! :rolleyes:
 

Master Yoda

Administrator
Administrator
Verified
Haha.. yep.. you know I will! I'll solve it at some point. Thx for the css mate.. I think the confusing bit still for me as a rank amateur is that it seems I also need html code as one can't go without the other.. is that about right? Exponential trial and error is ageing me in dog years! :rolleyes:
Yeah HTML and CSS is recommended! But don’t hesitate to ask for help! I built Code Forum to help coders such as myself and you of all skill levels, so use this resource to your advantage.
 

StuMur

New Coder
God, I'm so sorry mate, I've been stalled by other site issues, so I forgot to check back in here.. no, I didn't really work outhow to solve this to any satisfactory level, as I headed off trying to solve some other more pressing css and html conondrum, which is still besting me unfortunately. Thank you for that code.. I will stick it in and see how it looks! :)
 

Master Yoda

Administrator
Administrator
Verified
God, I'm so sorry mate, I've been stalled by other site issues, so I forgot to check back in here.. no, I didn't really work outhow to solve this to any satisfactory level, as I headed off trying to solve some other more pressing css and html conondrum, which is still besting me unfortunately. Thank you for that code.. I will stick it in and see how it looks! :)
It's okay! We just want to make sure you find the solution to your problem!
 

TopSilver

Active Coder
Community Partner
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
 
Top Bottom