PDA

View Full Version : Centering images in a DIV tag


photogenius
06-26-2010, 04:48 PM
I am designing a website based on my hobby/course assignment

What I am having problems with, is centering an image inside a <div> tag

I have used the html tag <center> which did center the image, but would prefer that to be done with css, which I have tried, but it doesn't seem to be working

At the moment, I can't put a link because I don't have a website of my own to show you what I basically want


I am using Dreamweaver CS5

gentleone
06-26-2010, 06:12 PM
At the moment, I can't put a link because I don't have a website of my own to show you what I basically wantYou can also post the code you have so far here :)

But... lets say that you have assigned an ID or class to that div tag like for instance 'header':

<div id="header">
<img src="image.jpg" alt="" />
</div>
Than you could center it in your CSS like this:

#header img {margin: 0 auto}

photogenius
07-04-2010, 08:47 PM
You can also post the code you have so far here :)

But... lets say that you have assigned an ID or class to that div tag like for instance 'header':

<div id="header">
<img src="image.jpg" alt="" />
</div>
Than you could center it in your CSS like this:

#header img {margin: 0 auto}


That didn't work at all, i'm afraid, dunno why

photogenius
07-04-2010, 08:56 PM
<div id="divPhotoSample">
<div id="divPhoto1"><img src="Images/clubbing.png" alt="clubbing" width="175" height="117"></div>
<div id="divPhoto2"><img src="Images/Food23.png" alt="food" width="175" height="117"></div>
<div id="divPhoto3"><img src="Images/music.png" width="175" height="117" alt="music"></div>
<div id="divPhoto4"><img src="Images/traffic.png" width="175" height="117" alt="transport"></div>
</div>

What I am trying to do is centre the images inside the <div> id "divPhoto1" to "divPhoto4"

edbr
07-05-2010, 03:38 AM
try this

#divPhotoSample img {margin: 0 auto; clear:both;}


<div id="divPhotoSample">
<img src="Images/clubbing.png" alt="clubbing" width="175" height="117">
<img src="Images/Food23.png" alt="food" width="175" height="117">
<img src="Images/music.png" width="175" height="117" alt="music">
<img src="Images/traffic.png" width="175" height="117" alt="transport">
</div>

photogenius
07-05-2010, 08:57 AM
Nope, didn't work, that made the photos, rather than be separate, be grouped together, which isn't quite what I am after

Corrosive
07-05-2010, 10:24 AM
If all your photos are the same size then try adding a px width to your CSS for img. They won't centre without a width IMO.

Also look at your CSS structure. It would make more sense to have a class and an ID applied to your divs so that the styles that remain the same are defined by the class and the individual stuff is targetted with an ID.