How to Change Images Alignment in Posts

Let's go for more ways to format posts & see how to align pictures.

Images are in most of forums aligned by default on the left side, to change that you need to use one of three tags we already saw in a previous lesson, the [left], [center] & [right] tags, see their use with text here: How to Change Text Alignment.

To summarize, you use one of those tags at once to wrap your text (or image as we'll see):

[left] for left alignment, [center] to center an element & [right] to align an element on the right.

The use of those tags with images is not different than the use for text, you just need to combine them with the [img] tag (learn more about how to combine tags here: How to Correctly Insert Tags).

Examples:

Again let's use Google Logo image as an example:

http://www.google.com/intl/en_ALL/images/logo.gif

Wrap it with the [img] tag:

[img]http://www.google.com/intl/en_ALL/images/logo.gif[/img]

Then according to if you want the image on the left, center or the right, wrap the whole with [left], [center] or [right] tags respectively:

[left][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/left]

[center][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/center]

[right][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/right]

That's all :)

Notes:

1. As with Fonts Change, unfortunately the guys from phpBB seem to think it useless to let users change text or images alignment, let's hope they fix that soon. With other popular forums platforms text alignment works fine: vBulletin, IP.Board & Simple Machines. To know if your posts are on a phpBB powered forum, see: What Kind of Forum are You Using?

2. When you combine tags, most of time, it doesn't matter in which order you insert them as long as the ones you open first are closed last & so on.

However, when you combine [img] tag with other tags, it must the closest to the image URL it wraps (i.e. directly in contact with it) or else you get an error ..

Example:

[center][img]http://www.google.com/intl/en_ALL/images/logo.gif[/img][/center] - Right

[img][center]http://www.google.com/intl/en_ALL/images/logo.gif[/center][/img] - Wrong