The following are examples on how to put a titlesunderneath or on the side with images vertically or horizontally aligned. This sometimes does not go as easily as planned so these examples should cover all scenarios.
Horizontal
Inline - Horizontal lists with text centered underneath the image.
The whole logo block is centered. do i need all the centering statements. these items will stay centered and will eventually stack vertically when squashed.
<div style="text-align: center;">
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;">
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px; text-align: center;">
<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
</div>
All the "text-align: center" declarations are not required (as shown below) because it seems to affect all child elements, thus only 1 is required
<div style="text-align: center;">
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p>
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
</div>
Text Under Image - Horizontal and Centered
<div style="text-align: center;"> <div style="display: inline-block; vertical-align: bottom;"> <div style="display: block;"> <a href="http://www.gassaferegister.co.uk/" target="_blank" title="Gas Safe Registered Number: 562488"><img style="margin: 5px;" src="/images/modules/logos/gas-safe-white.gif" alt="" /></a> </div> <div style="display: block;"> <a href="http://www.gassaferegister.co.uk/" target="_blank">Gas Safe No: 562488</a> </div> </div> <!-- These are just logos with no text underneath --> <a href="http://www.cityandguilds.com/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/cityandguilds-logo-qualifications.png" alt="" /></a> <a href="http://www.vaillant.co.uk/" target="_blank" title="Vaillant Accredited installer"><img style="margin: 5px;" src="/images/modules/logos/vaillant_logo.png" alt="" /></a> <a href="http://www.ideal-standard.co.uk/" target="_blank"> <img style="margin: 5px;" src="/images/modules/logos/ideal-standard.jpg" alt="" /></a> </div>
The Basic Method
- works but sometimes the styling gets wrong
<div> <div><img src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" /></div> <div>If you’re working full time hours we can call at lunchtime and treat your dog to over an hours'.</div> </div>
Text Completely Below and Image ie cleared without floats
- Put the image in its own paragraph, this adds a line break into it thus starting the text completely below the image.
<p><img src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" /></p> <p>If you’re working full time hours we can call at lunchtime and treat your dog to over an hours'.</p> or <p> <img src="http://designingmedia.com/tonic.jpg" alt="WordPress Theme"><br> This is some content </p>
Horizontal List - with one image with a link centered underneath it.
<div style="text-align: center;"> <div style="display: inline-block; vertical-align: bottom;"> <div style="display: block;"><a href="http://www.gassaferegister.co.uk/registersearch/Engineers.aspx?businessid=127148&centreid=112514&returnurl=../FindBusiness.aspx&returnname=Find%20a%20business&reload=true" target="_blank" title="Gas Safe Registered Number: 562488"> <img style="margin: 5px;" src="/images/modules/logos/gas-safe-white.gif" alt="" /></a></div> <div style="display: block;"><a href="http://www.gassaferegister.co.uk/registersearch/Engineers.aspx?businessid=127148&centreid=112514&returnurl=../FindBusiness.aspx&returnname=Find%20a%20business&reload=true" target="_blank">Gas Safe No: 562488</a></div> </div> <a href="http://www.cityandguilds.com/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/cityandguilds-logo-qualifications.png" alt="" /></a> <a href="http://www.vaillant.co.uk/" target="_blank" title="Vaillant Accredited installer"> <img style="margin: 5px;" src="/images/modules/logos/vaillant_logo.png" alt="" /></a> <a href="http://www.ideal-standard.co.uk/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/ideal-standard.jpg" alt="" /></a> </div>
Inline Horizontally List - margin auto 0
I have not testest this method but you can see the 'margin: 0 auto;' statement is a child on the main <div>. The 'margin: 0 auto;' works on the element it is set on. The other thing to note is that the dive with the 'margin: 0 auto;' statement needs to have a defined width. You can use px, width, Max-width etc.. as long as a width is set. The reason for this is you cann center an item with no width or if the width is 100%.
<div style="margin: 0 auto; width: 80%;">
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p>
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
</div>
Float Left
This will stack the items either vertically (not level if images are different sizes) or horizontally while keeping the bottoms level (vertically aligned bottom) because floated images go up
<div style="float:left; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;">
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="float:left; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="float:left; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
Vertical
margin 0 auto - vertically stacked and centered
If you dont want to use <li> method, you can replace this with a <div> or <p>
<div style="margin: 0 auto; padding: 5px;">
<p style="text-align: center;">
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="margin: 0 auto; padding: 5px;">
<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="margin: 0 auto; padding: 5px;">
<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
Text Under Image - Vertically Stacked
<div style="float: left; width: 150px; margin-right: 40px;"> <div> <div style="display: inline-block;"><a href="http://www.hormann.co.uk" target="_blank"><img src="/../images/hormann.gif" alt="image 1" /></a></div> <h5 style="text-align: center;">Hormann</h5> </div> <div> <div style="display: inline-block;"><a href="http://www.gliderol.co.uk/" target="_blank"><img src="/../images/gliderol.gif" alt="image 2" /></a></div> <h5 style="text-align: center;">Gliderol</h5> </div> <div> <div style="display: inline-block;"><a href="http://www.domesticrollershutters.co.uk/" target="_blank"><img src="/../images/domestic-rollers-logo.jpg" alt="image 2" /></a></div> <h5 style="text-align: center;">Domestic Rollers</h5> </div> </div>
Side
Images with title on the right side vertically centered
<div> <div style="display: inline-block;"><img src="/images/modules/logo-block/logo-200px-high.png" alt="" /></div> <!-- Method 1 --> <div style="display: inline-block; height: 20px; margin: auto auto;">Method 1</div> <!-- Method 2 --> <div style="display: inline-block; height: 100%;"> <p style="display: block; margin: auto auto;">Method 2</p> </div> </div>
- Method 1 - relies on a defined height
- Method 2 - height is dynamically created by the font