# aligning image with css



## aconite (Feb 1, 2006)

hi,

I am trying to align the left image of the baby using css, a bit closer to the center but am having trouble, I tried using padding, margin and even margin-left but it doesn't seem to work. Below is the css, html and the image

CSS
body {
background-color: #ffffff;
font-family: "Walkway Round";
font-size: 62.5%;
color: #000000;
font-weight:normal;
}

#wrapper {
background-color:#ffffff;
height:auto;
width:750px;
margin-right:auto;
margin-left:auto;

}

#headerimage {
width:50%;
height:215px;
float:left;
}

#headerimageRight {
width:50%;
height:215px;
float:right;
}

HTML



















thanks


----------



## lavazza (May 15, 2006)

Hi aconite,

Without seeing ALL of the code, it's impossible (for me at least) to tell exactly what's going on

But... looking at the screenshot, I can see some clues

The headerimage div is left aligned as per the header logo ¶P Photo Restoration Expert

Some of your code is, I think, overkill

Misc:

files names for images
 redeye before&after together.jpg
 redeyeBeforeAndAfterTogether.jpg
 tornPhoto_before&after_together.jpg
 tornPhoto_beforeAndAfter_together.jpg

Just to illustrate how it works, I have changed the width and height of the 2nd image
from width="298" height="215"
to 
width="198" height="105" 
and used vertical-align: middle; in the myImage class to align them

----------

This is valid CSS and HTML

Hopefully it'll help


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-GB">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<style type="text/css">
			body {
				background-color: #FF0000;
				font-family: "Walkway Round", Arial,Verdana,Helvetica,sans-serif; ;
				font-size: 62.5%;
				color: #000000;
				font-weight:normal;
			}
			
			#wrapper {
				background-color:#FFFF00;
				height:auto;
				width:750px;
				padding:10px;
				margin-right:auto;
				margin-left:auto;
				
			}
			
			.c	{
				text-align: center ! important;
				background-color:#0000FF;
			}
			
			
			
			/* vertical-align can be top, middle or bottom */
			
			.myImage {
				vertical-align: middle;
				background-color:#FF00FF;
				padding:10px 20px 30px 40px;
			} 
			
			/* adjust padding values to suit (order: top, right, bottom, left) */
			
			
		</style>

		
		<title>	aligning image with css
		</title>
	</head>
	<body>
		<div id="wrapper">
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in purus a dui venenatis laoreet. Integer faucibus convallis urna. 
				Maecenas iaculis justo non leo. Duis eget tortor eu dui dapibus sagittis. Integer nec diam. Maecenas tristique auctor ligula. In 
				egestas. Nunc interdum magna id felis. Sed hendrerit nunc non quam. In fringilla erat id erat. In vitae nulla congue mauris fringilla 
				iaculis. Sed gravida tellus eget purus. Sed pulvinar aliquam turpis. Curabitur metus magna, pretium ac, egestas in, bibendum sit 
				amet, pede. Proin tristique. Curabitur fringilla euismod libero. Aenean pulvinar, massa vitae sodales rutrum, nunc dui adipiscing 
				enim, in aliquam lacus urna id tellus. Quisque bibendum sollicitudin orci.
			</p>
			<p class="c">
				<img class="myImage" src="images/redeye before&after together.jpg" width="298" height="215" alt="fixing_red_eye">
				&nbsp;
				<img class="myImage" src="images/tornPhoto_before&after_together.jpg" width="198" height="105" alt="fixing_torn_photo">
			</p>
			<p>
				Aliquam vel mauris. Fusce ultrices, mi et pellentesque tincidunt, nisi risus dignissim libero, ac vulputate orci sem ut nibh. Etiam lacus dolor
				donec neque. Duis felis. Nulla enim. Donec mollis felis vitae odio. Nam ultrices ante vitae urna. Proin sit amet justo eu purus pellentesque 
				mollis. Etiam sagittis orci quis felis. Aliquam a nulla vel urna tristique auctor. Vestibulum eleifend. Pellentesque habitant morbi tristique 
				senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
				turpis egestas. Nulla id orci sit amet purus tempus dictum. Phasellus tincidunt.
			</p>
		</div>	
	</body>
</html>
```
<edit>PS I used a mix of random (and garish) background colours simply to show what's going where</edit>


----------



## Big-K (Nov 22, 2003)

since you have a set width for the area and the images are set widths as well, you can use something like this: (assume both images are 200px wide, and that there is 100px between the left edge of the left header and the left edge of the area)

#headerimage {
width:200px;
height:215px;
position:absolute;
margin-left:100px:
}

#headerimageRight {
width:200px;
height:215px;
position:absolute;
margin-left:450px;
}


----------

