How can I easily center images within a div?

Hi,
I’m having a bit of trouble with my images.
I got a div and I want to put 2 images side by side in the div and I’d like them both centered, how can I easily do this.

Text align doesn’t seem to have any effect.


<div class="examplebox">
    <img src="../images/table-example-1.png" alt="table example" width="306" height="261" />
    <img src="../images/css-table-example-2.png" alt="css-table-example" width="235" height="227" />
</div>

[css]
.examplebox {
margin-right: auto;
margin-left: auto;
width: 90%;
margin-top: 0px;
margin-bottom: 0px;

}

.examplebox img {
text-align:center;
}
[/css]

I know that I COULD create a class for both of the images, but I want to make it easier on myself in the future, i.e. create a set of rules so that any images inside “examplebox” are centered unless otherwise specified.

I feel that I’ve logically done it correctly, so is css in this regard illogical or am i just getting it wrong?

Hi,

The text-align:center needs to be on the parent and not on the image itself. The image has no children that can be centred. .examplebox is the parent that contains the children than need to be centred:)


.examplebox {
    margin: auto;
    width: 90&#37;;
[B]text-align:center;[/B]

}

Text-align:center will only center inline elements such as text and images. If for example the images were mad to be display:block then they would not be centred.

darn, ok that makes sense.
The problem is that the “examplebox” wont just contain images, it will contain text as well.

For example:

          Image title1                                     Image title2
             Image                                               image

So for this would I have to perhaps make “example box” text-align:center, then give each image name/image combination it’s own container div?

Hi,

It all depends on what you are trying to do.:slight_smile:

As I said above text-align:center is just for inline elements. If you add block containers inside then you will have no centering because block level elements are not centred with text-align (except in ie5.x).

To center block level elements you need to give them a width and then use margin:auto. However this only allows one element on a line at a time.

To have horizontal block elements you need to float them but then margin:auto doesn’t work on floated elements and you are back to square one. It is extremely difficult to center multiple block elements of unknown size.

There is no one size that fits all and you have to take a different approach depending on all the other factors present.

That’s why its often hard to answer a question explicitly because the solution depends on what went before and what comes after :slight_smile:

I settled on creating a separate class just for the images and setting them to text-align: center;

It’s probably not ideal but I suppose once I’ve done a bit more design for this website I’ll come up with a refinement for it.

Thanks for your help.

You shouldnt have to settle creating a seperate class doing this.Contain your images inside <p></p> tags.This way its all one div.You can use my HTML and CSS if you want.:slight_smile:

http://www.blakeanthony.net/Center.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centering a Div with Images Centered inside</title>
<style type="text/css">

#center {
  margin-left: auto;
  margin-right: auto;
  width:420px;
  height:420px;
  border:1px dotted #111;
  background:#EFEFCC;
  text-align:center;
 }
img {
text-align:center;
height:210px;
width:190px;
border:1px dotted #111;
}
p {
text-decoration:none;
font-size:1em;
}

</style>
</head>
<body>
    <div id="center">

    This block is centered also.
<p>
<a href="http://www.sitepoint.com"><img src="http://blakeanthony.net/images/welcomes_winter.jpg" alt="Your image is Center">
<a href="http://www.sitepoint.com"><img src="http://blakeanthony.net/images/welcomes_winter.jpg" alt="Your image is Center">
</p>
</div>
</body>
</html>

You can also center images inside a div using Display:block;.Apply the margin properties.

Example of Block image:


img.center {
    display: block;
    margin-left: auto;
    margin-right: auto }

<img class="center" src="http://www.sitepoint.com" alt="image">

My Examples are 100% Valid. :slight_smile: