Image alignment

To properly align images:

1. Use the “Add Media” button to insert the image into the post.
2. Be sure you are on the “Text” tab of the editor.
3. Find the code that places your image. It will look something like this:

<a href=”https://mbutimeline.mobap.edu/wp-content/uploads/2014/10/DSC_2787.jpg”><img class=”size-medium wp-image-6030″ src=”https://mbutimeline.mobap.edu/wp-content/uploads/2014/10/DSC_2787-300×200.jpg” alt=”Photo by: Ryan Rerich ” width=”300″ height=”200″ /></a>

Note: if there is a caption on the image, it will look like this:

[caption id=”attachment_6030″ align=”alignleft” width=”300″]<a href=”https://mbutimeline.mobap.edu/wp-content/uploads/2014/10/DSC_2787.jpg”><img class=”size-medium wp-image-6030″ src=”https://mbutimeline.mobap.edu/wp-content/uploads/2014/10/DSC_2787-300×200.jpg” alt=”Photo by: Ryan Rerich ” width=”300″ height=”200″ /></a> Photo by: Ryan Rerich[/caption]

4. In order to get the image to align correctly, while still on the text tab, add the following code before the image code:

<div style=”align:left;margin-right:8px;”>

and the following after the image code:

</div>

The final code should look like this:

<div style=”align:left;margin-right:8px;”>
[caption id=”attachment_6030″ align=”alignleft” width=”300″]<a href=”https://mbutimeline.mobap.edu/wp-content/uploads/2014/10/DSC_2787.jpg”><img class=”size-medium wp-image-6030″ src=”https://mbutimeline.mobap.edu/wp-content/uploads/2014/10/DSC_2787-300×200.jpg” alt=”Photo by: Ryan Rerich ” width=”300″ height=”200″ /></a> Photo by: Ryan Rerich[/caption]<a href=”https://mbutimeline.mobap.edu/wp-content/uploads/2014/10/DSC_2787.jpg”><img class=”size-medium wp-image-6030″ src=”https://mbutimeline.mobap.edu/wp-content/uploads/2014/10/DSC_2787-300×200.jpg” alt=”Photo by: Ryan Rerich ” width=”300″ height=”200″ /></a> Photo by: Ryan Rerich[/caption]</div”>