Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

HTML & CSS How To Center Items in A Div?

S

StuMur

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
 
Sort by date Sort by votes
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.
[CODE lang="css" title="CSS" highlight="2"].bandblock {
padding-right: 15px;
}[/CODE]

Edit: can you actually point out what needs to be centred via screenshot?
 
Last edited:
Upvote 0 Downvote
Master Yoda said:
Edit: can you actually point out what needs to be centered via screenshot?
Click to expand...

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.webp
    Screen Shot 2020-02-12 at 12.54.59 am.webp
    13.4 KB · Views: 4
  • Screen Shot 2020-02-12 at 12.59.35 am.webp
    Screen Shot 2020-02-12 at 12.59.35 am.webp
    10.7 KB · Views: 4
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Master Yoda said:
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.
Click to expand...
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
 
Upvote 0 Downvote
StuMur said:
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
Click to expand...
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.

[CODE lang="css" title="CSS @Media"]@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}[/CODE]
 
Upvote 0 Downvote
Master Yoda said:
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.

[CODE lang="css" title="CSS @Media"]@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}[/CODE]
Click to expand...
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?
 
Upvote 0 Downvote
StuMur said:
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?
Click to expand...
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):
[CODE lang="css" title="CSS @Media"]@media screen and (min-width: 900px) {
.sidebar-stuff {
max-width: 100%;
}
}[/CODE]

Note you may have to change (min-width: 900px) to (max-width: 900px).
 
Last edited:
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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!
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
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:
 
Upvote 0 Downvote
StuMur said:
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:
Click to expand...
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.
 
Upvote 0 Downvote
[CODE lang="css" title=".sidebar-stuff" highlight="3"].sidebar-stuff {
display: inline-block;
max-width: 222px;
float: left;
padding-left: 33px;
}[/CODE]
Remember this is affecting your mobile appearance. You need to use the @media to adjust to mobile screens.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Master Yoda said:
Just keep going. Remember this is affecting your mobile appearance. You need to use the @media to adjust to mobile screens.
Click to expand...
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! 🙄
 
Upvote 0 Downvote
StuMur said:
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! 🙄
Click to expand...
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.
 
Upvote 0 Downvote
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! 🙂
 
Upvote 0 Downvote
StuMur said:
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! 🙂
Click to expand...
It's okay! We just want to make sure you find the solution to your problem!
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
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
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom