2 pictures side by side centered with text block under

clinby

Banned
What I am trying to do it put two pictures side by side center on the page with text under them streaching the full length of the container block.
Problem: I don't know how to get the two image next to one another in the center of the page
Currently I have-->
Code:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
.container{
}

.images{
}

.text{
text-align:center;
}
-->
</style>

</head>
<body>

<div class="container">
<div class="images">
<img src="http://charlescoughlin.com/ebay/081209_Dewalt/dewalt735ssm.jpg" width="186" height="157" />
<img src="http://charlescoughlin.com/ebay/081209_Dewalt/dewalt735ssm.jpg" width="190" height="155" /></div>
</div>
<div class="text">
Text that need to go under the pictures and fit between the container
</div>
</div>

</body>
</html>
 

MasterTheWeb

New Member
Put the divs in center like this:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">

.container{

margin:0 auto;
}

.images{
width: 385px;
margin:0 auto;
}

.text{
text-align:center;
}

</style>

</head>
<body>

<div class="container">
<div class="images">
<img src="http://charlescoughlin.com/ebay/081209_Dewalt/dewalt735ssm.jpg" width="186" height="157" />
<img src="http://charlescoughlin.com/ebay/081209_Dewalt/dewalt735ssm.jpg" width="190" height="155" /></div>
</div>
<div class="text">
Text that need to go under the pictures and fit between the container
</div>
</div>

</body>
</html>

this should do the tric. check the css.
 
Last edited:
Top