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.

 <p class="text-left">Left-aligned text</p>
 
 <p class="text-right">Right-aligned text</p>
 
 <p class="text-center">Center-aligned text</p>
 

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.

  • left will float an object to the left. For example
    <img class="left" src="... /> or <div class="pullquote left">
     
  • right will 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.

<img class="left padright" src="... />
 

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.

<div class="left marginright">
    <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

The absmiddle 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.

Updated:  19 March 2014/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle