Images don’t align underneath each other correctly
Question:
I want to align my images underneath each other.
Everything looks fine in the WordPress editor. But when I look at my page it is all broken.
Here is how it looks in the editor:
Here is how it looks on the website:
Answer:
This is one of the most common WordPress and Visual Editor annoyances.
Essentially what is going on here is that there is not enough text to fill the length of the picture – hence the image below slides up to fill the space.
The easiest solution is to add more text or make the image smaller. However this may not be possible or desirable.
The Professional Solution:
Toggle you page or post editor into html mode and wrap the image and according text into a <div>
The screenhot above shows two div’s – one for each image with text.
Don’t forget to close your div’s (</div>)
Adjust the height of the div according to your images.
Variation: Have 2 images next to each other with text underneath
Using the “float” property you can easily adjust the code from above and have images side by side.
Here is what the code would look like for each indiviudal image with associated text:
<div style=”width: 234px; height: 275px; float: left; margin-right: 20px; margin-bottom: 20px;”>
<img class=”wp-image-12 size-full alignnone” title=”234″ src=”http://www.localsearchtips.com/smallbiz3.3.1/wp-content/uploads/2010/11/234.png” alt=”" width=”234″ height=”175″ />
<p>My text goes here.</p>
</div>
