CSS: Center inside float

HTML & CSS
1

Can anyone tell me how to get the photos centered here? I tried all the tricks I read about in this forum, and a bunch of others, and in books, and they just stay anchored left. Arg.


<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
	<div id="container" style="width: 791px;">
	
		<div style="float: left; width: 250px; margin: 5px 0 5px 10px; background-color:#CCF">
			<p class="name" style="text-align: center;">George Washington</p>
			<p class="photo"><img src="george.jpg" alt="George Washington" width="164" height="164" /></p>
			<p style="margin: 10px;">All kinds of text goes here.</p>
		</div>
		
		<div style="float: left; width: 250px; margin: 5px 0 5px 10px; background-color:#CCF">
			<p class="name" style="text-align: center;">Abraham Lincoln</p>
			<p class="photo"><img src="abe.jpg" alt="Abraham Lincoln" width="164" height="164"></p>
			<p style="margin: 10px;">All kinds of text goes here, too.</p>
		</div>
		
	</div>
</body>
</html>

Thanks,
Cyd

2

If you set text-align:center on the parent, the inline elements (aka the image) will be set to the center :).

Otherwise you’d need to set an image on the width and give it margin:0 auto; :).