menu
» Web style guide » Alignment Alignment
Classes exist to apply alignment to a number of elements such as boxes, pullquotes, tables and images. Padding and spacing provides further information on how to add whitespace to elements.
Text alignment
Text is left-aligned by default, but classes are available for this and other alignments.
Justified text is not used within ANU style as it can be very difficult to read on a screen. In general, ANU style is for left-aligned text unless there is a compelling reason to use other alignment.
Floating left & right
Using the following classes will 'float' an object to the left or right of a container.
leftwill float an object to the left. For example<img class="left" src="... /> or <div class="pullquote left">
rightwill float an object to the right. For example<div class="box right" src="... /> or <div class="pullquote right">
Text wraps around a floated object by default. To stop the text from appearing right up against a floating object you should add some padding classes. For example:
In this example the text wraps underneath the image but there is some space around the image because we have added padding.
If you do not want the text to wrap you need to put the object in a div or column of its own and the text in another column (using a grid class or a combination of alignment and width classes). For example:
In this example the text stays on the right of the image and doesn't wrap underneath because the image is in one div and the text is in another div.
<img src="... />
</div>
<div class="w-narrow left marginleft">
<p>Some text in here... </p>
</div>
Clear & noclear
When laying out content you might need to force a clear (so that content goes onto the next line) or to prevent one (so that content stays on the same line). In these cases, use the clear or noclear class, respectively.
Vertical alignment
Theabsmiddle class will align the vertical centre of an image only to the vertical centre of a line of text. Useful for small icons and other inline images.
