Centering images with captions in CSS

programming web dev
1

I’m trying to center a row of images, with captions, but failing miserably. Heres my test site (link deleted)

Heres the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Center Float test</title>
<style type="text/css">
<!--
.center {text-align:center; margin:0 auto;}
.items {display:inline;}
.wrapper {display:block;}
.text {display:none;}

.float {float:left;}
.clearing {clear:both;}

-->
</style>
</head>

<body>
<div class="center">
	<div>Display:inline</div>
	<div class="items"><img src="img.jpg" alt="img" />div test 1</div>

	<div class="items"><img src="img.jpg" alt="img" />div test 2</div>
	<div class="items"><img src="img.jpg" alt="img" />div test 3</div>
</div>
<div>&nbsp;</div>
<div class="center">
	<div>Float</div>
	<div class="float"><img src="img.jpg" alt="img" /><br />div test 1</div>
	<div class="float"><img src="img.jpg" alt="img" /><br />div test 2</div>

	<div class="float"><img src="img.jpg" alt="img" /><br />div test 3</div>
    <div class="clearing">&nbsp;</div>
</div>
</body>
</html>

As you can see I’m trying two methods - floating the images to get them aligned, and by using display:inline; but neither work how I’d like. If I take out the text, display:inline works fine. But I need the text there :slight_smile: