Simple CSS/HTML: How to get div centered mobile and desktop

David S and Steve Blink,

I am confused. Could you give me the actual CSS and if necessary html and then explain it piece by piece. I don't understand what you are saying. Sorry, I am a novice and would like to use this opportunity to learn. I tried to implement what you gave me and my banner was all the way left and my content below my buttons was under the buttons.

Thanks. Sorry

greetngs weikelbob, , you problem if having the <img> as  float: left;, I have changed the CSS for this, You can use the <a> as image containers, which should give a better responsive display, here is some page CSS you can try -

#categories-frontp
{
text-align:center;
}

.banner-frontp
{
padding: 0px 0px 15px 0px;
max-width:935px;
}

.buttons-frontp
{
max-width:935px;
}

.buttons-frontp a 
{
display: inline-block;
/*margin: 11px;*/
margin: 0.9%;
max-width:182px;
}

.buttons-frontp img
{
width: 100%;
}

Select allOpen in new window

this gives me centered categories in firefox

Neither the "Shop by Category" banner nor the buttons are centered on my computer in firefox.

Attached image

Also, in mobile, the buttons take up the entire width of the screen.

#categories-frontp
{
text-align:center;
}

.banner-frontp
{
padding: 0px 0px 15px 0px;
max-width:935px;
text-align:center;
}

.buttons-frontp
{
max-width:935px;
}

.buttons-frontp a 
{
display: inline-block;
/*margin: 11px;*/
margin: 0.9%;
max-width:182px;
}

.buttons-frontp img
{
width: 100%;
}

Select allOpen in new window

<div id="categories-frontp">
 	<div class="banner-frontp"><img style="border:0px" alt="shop-by-category-home-page-title" src="/assets/images/shop-by-category-banner-frontp.gif"></div>
 		<div class="buttons-frontp">
 		<a href="http://www.idiaper.com/adult-pullups"><img style="border:0px" alt="pull ups button" src="/assets/images/adult-pull-ups-frontp.gif"></a>
		 <a href="http://www.idiaper.com/adult-diapers-with-tabs"><img style="border:0px" alt="adult diapers with tabs button" src="/assets/images/adult-diapers-with-tabs-frontp.gif"></a>
		 <a href="http://www.idiaper.com/adult-cloth-diapers"><img style="border:0px" alt="adult cloth diapers button" src="/assets/images/adult-cloth-diapers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/mens-diapers"><img style="border:0px" alt="mens diapers button" src="/assets/images/mens-diapers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/womens-diapers"><img style="border:0px" alt="womens diapers button" src="/assets/images/womens-diapers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/overnight-adult-diapers"><img style="border:0px" alt="overnight adult diapers button" src="/assets/images/overnight-frontp.gif"></a>
		 <a href="http://www.idiaper.com/youth-diapers-teenager-diapers"><img style="border:0px" alt="youth and teenage diapers button" src="/assets/images/youth-teen-diapers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/incontinence-pads"><img style="border:0px" alt="incontinence pads button" src="/assets/images/pads-frontp.gif"></a>
		 <a href="http://www.idiaper.com/adult-diaper-covers"><img style="border:0px" alt="adult diaper covers button" src="/assets/images/adult-diaper-covers-frontp.gif"></a>
		 <a href="http://www.idiaper.com/waterproof-bed-pads"><img style="border:0px" alt="underpads button" src="/assets/images/reusable-underpads-frontp.gif"></a>
		 </div>
	 </div>
 </div>[embed=file 1182496]

Select allOpen in new window

not-centered.gif

The CSS of   text-align: center;   will affect all sub elements that can implement that, so I do not see that the elements can not be center aligned. . I did not say, but you must NOT HAVE the old CSS of -
.buttons-frontp img
{
padding: 11px 11px;
float:left;
max-width:182px;
height:auto;
}
where the images are assigned float:left;, which will cause the images to NOT be centered.

I looked at the code you showed again, and you do not need to have the   style="border:0px"   in all of the images, you can just place that in the .buttons-frontp img { } CSS
Also you have a div as -
     <div class="banner-frontp">
which does nothing useful in this, so I took it out,

I have simplified the CSS and now do not assign the <a> any CSS properties;

here is my code version, that works for me, and you might try it out -

<style>
#categories-frontp
{
text-align:center;
max-width:935px;
}

.buttons-frontp
{
margin-top:15px;
}

.buttons-frontp img
{
width: 182px;
margin: 1%;
border: 0px;
}

</style>

<div id="categories-frontp">
    <img alt="shop-by-category-home-page-title" src="http://www.idiaper.com/assets/images/shop-by-category-banner-frontp.gif">
    <div class="buttons-frontp">
		<a href="http://www.idiaper.com/adult-pullups">
			<img alt="pull ups button" src="http://www.idiaper.com/assets/images/adult-pull-ups-frontp.gif"></a>
		<a href="http://www.idiaper.com/adult-diapers-with-tabs">
			<img alt="adult diapers with tabs button" src="http://www.idiaper.com/assets/images/adult-diapers-with-tabs-frontp.gif"></a>
		<a href="http://www.idiaper.com/adult-cloth-diapers">
			<img alt="adult cloth diapers button" src="http://www.idiaper.com/assets/images/adult-cloth-diapers-frontp.gif"></a>
		<a href="http://www.idiaper.com/mens-diapers">
			<img alt="mens diapers button" src="http://www.idiaper.com/assets/images/mens-diapers-frontp.gif"></a>
		<a href="http://www.idiaper.com/womens-diapers">
			<img alt="womens diapers button" src="http://www.idiaper.com/assets/images/womens-diapers-frontp.gif"></a>
		<a href="http://www.idiaper.com/overnight-adult-diapers">
			<img alt="overnight adult diapers button" src="http://www.idiaper.com/assets/images/overnight-frontp.gif"></a>
		<a href="http://www.idiaper.com/youth-diapers-teenager-diapers">
			<img alt="youth and teenage diapers button" src="http://www.idiaper.com/assets/images/youth-teen-diapers-frontp.gif"></a>
		<a href="http://www.idiaper.com/incontinence-pads">
			<img alt="incontinence pads button" src="http://www.idiaper.com/assets/images/pads-frontp.gif"></a>
		<a href="http://www.idiaper.com/adult-diaper-covers">
			<img alt="adult diaper covers button" src="http://www.idiaper.com/assets/images/adult-diaper-covers-frontp.gif"></a>
		<a href="http://www.idiaper.com/waterproof-bed-pads">
			<img alt="underpads button" src="http://www.idiaper.com/assets/images/reusable-underpads-frontp.gif"></a>
	</div>
</div>

Select allOpen in new window

Please remember to Replace all of the old CSS of the .buttons-frontp img { } and the rest of the old CSS.

Also, I did not really understand the way you have set up the column arrangement in that section with the  -
     <div id="categories-frontp">
categories part, But if you also need the  <div id="categories-frontp">  to be centered in that column, then you will need to add the horizontal auto margins -

#categories-frontp
{
text-align:center;
max-width:935px;
margin: 0 auto;
}

This is more clear, but there's something interfering.

Check out the CSS on

www.idiaper.com

It's not centering .buttons-frontp

Here's the CSS and HTML I used, but again, there's something somewhere else in the CSS besides my code below that is interfering I believe.

Image attached

Thanks

#categories-frontp
{
text-align:center;
max-width:935px;
display:block;
margin:0 auto;
}
.banner-frontp img
{
display:block;
margin:15px auto;
}

.buttons-frontp
{
margin-top:15px;
}

.buttons-frontp img
{
width: 182px;
margin: .02%;
border: 0px;
}

Select allOpen in new window

<div id="categories-frontp">
    <div class="banner-frontp"><img alt="shop-by-category-home-page-title" src="http://www.idiaper.com/assets/images/shop-by-category-banner-frontp.gif">
    </div>
    <div class="buttons-frontp">
		<a href="http://www.idiaper.com/adult-pullups">
			<img alt="pull ups button" src="http://www.idiaper.com/assets/images/adult-pull-ups-frontp.gif"></a>
		<a href="http://www.idiaper.com/adult-diapers-with-tabs">
			<img alt="adult diapers with tabs button" src="http://www.idiaper.com/assets/images/adult-diapers-with-tabs-frontp.gif"></a>
		<a href="http://www.idiaper.com/adult-cloth-diapers">
			<img alt="adult cloth diapers button" src="http://www.idiaper.com/assets/images/adult-cloth-diapers-frontp.gif"></a>
		<a href="http://www.idiaper.com/mens-diapers">
			<img alt="mens diapers button" src="http://www.idiaper.com/assets/images/mens-diapers-frontp.gif"></a>
		<a href="http://www.idiaper.com/womens-diapers">
			<img alt="womens diapers button" src="http://www.idiaper.com/assets/images/womens-diapers-frontp.gif"></a>
		<a href="http://www.idiaper.com/overnight-adult-diapers">
			<img alt="overnight adult diapers button" src="http://www.idiaper.com/assets/images/overnight-frontp.gif"></a>
		<a href="http://www.idiaper.com/youth-diapers-teenager-diapers">
			<img alt="youth and teenage diapers button" src="http://www.idiaper.com/assets/images/youth-teen-diapers-frontp.gif"></a>
		<a href="http://www.idiaper.com/incontinence-pads">
			<img alt="incontinence pads button" src="http://www.idiaper.com/assets/images/pads-frontp.gif"></a>
		<a href="http://www.idiaper.com/adult-diaper-covers">
			<img alt="adult diaper covers button" src="http://www.idiaper.com/assets/images/adult-diaper-covers-frontp.gif"></a>
		<a href="http://www.idiaper.com/waterproof-bed-pads">
			<img alt="underpads button" src="http://www.idiaper.com/assets/images/reusable-underpads-frontp.gif"></a>
	</div>
</div>

Select allOpen in new window

still-not-centering.jpg

I think I got it! Thanks Slick812! Had to use an inline style like you said was last resort.

Thanks again!

I gave Slick812 more points because he did the most. Hope that's OK with everybody.