First, make the two grey bands separate from the image in between.Originally Posted by wolverinejoe80
I can't tell whether your image includes the left and bottom text all together with the images or whether they are all coded independently but I have assumed below that it is all one big image.
Put this in your page code and see what I have done. I left the border in so you can see where it is.
<div style="width:100%; height: 50px; background-color:#bbb"></div>
<!--this gives a wide grey band full width-->
<div style="text-align:center; border:solid 1px;">
<img src="image.jpg" width="300" height="200" title="Images" alt="Images">
</div>
<div style="width:100%; height: 50px; background-color:#bbb"></div>
<!--this gives a wide grey band full width-->
This will put the whole set of images and text central, but as there is text on the left of the images they will appear slightly to the right. If you want the images to be central you will have to make a containing div with a float:left div for the left text, then a float:right div of equal width but no text so that the images in a div float up centrally in between. However, this usually means that the images flip down to a lower row when viewed with a smaller screen resolution unless it is all given position:absolute and fixed div widths.