Alignment

We've introduced a large set of classes that allow you to align your elements, such as texts, boxes, pull quotes, tables and images, etc.
If you'd like to add whitespaces to your elements, please read our documentation on Spacing.

General
Use cases

Overview

Text alignment

You can use a set of text alignment classes to align the inner content of a block element. Text is left-aligned by default, but there are additional classes that you can apply.

<text-left>: Content aligns along the left side.
<text-right>: Content aligns along the right side.
<text-center>: Content are center-aligned between the left and right edges.

Justified text is not included in the ANU web style because inappropriate use can cause difficulty in reading.

Float

The set of float classes can be used for positioning and formatting your content. Please note: text alignment classes apply to the content of a container, while float classes apply to the container itself. Generally speaking, float classes are widely used to wrap text around images.

<left>: the element floats to the left of its container.
<right>: the element floats to the right of its container.

Clear & noclear

When we use the float classes, we need to consider where we want to place the next element. These classes specify what would happen with the element next to the floating element. You can either use:

<clear>: force the element goes to the next line.
<noclear>: force the element stays on the same line.

Justify content

If you don't want to wrap text around images, you can: put the image in a grid column, and text in another column (using a grid class). You can apply the following classes in the parent element to justify your content.

<justify-content-start>: All elements inside will align along the left side of this current container.
<justify-content-center>: All elements inside will be center-aligned within this current container.
<justify-content-end>: All elements inside will align along the right side of this current container.

Horizontal center alignment

In order to center align an element, please use the following class:

<center>: horizontally center an element.

Vertical alignment

Use the following class to vertical-align an image to a line of text, Useful for small icons and other inline images.

<absmiddle>: align the vertical centre of an image only to the vertical centre of a line of text

Use cases

Text alignment

<p class="text-left">Left-aligned text</p>

<p class="text-right">Right-aligned text</p>

<p class="text-center">Centre-aligned text</p>

Float

In this example, the image floats to the left-hand side of the text, and we add 10px padding to the right-hand side of the image.


                            <div>
                                <img class="left pr-1" src="myimage.jpg" / >
                                <p>
                                In this example, the image floats to the left-hand side of the text, 
                                and we add 10px padding to the right-hand side of the image.
                                </p>
                            </div>

In this example, the image floats to the right-hand side of the text, and we add 10px padding to the left-hand side of the image.


                            <div>
                                <img class="right pl-1" src="myimage.jpg" / >
                                <p>
                                In this example, the img floats to the right-hand side of the text, 
                                and we add 10px padding to the left-hand side of the image.
                                </p>
                            </div>

Clear & noclear

In this example, the text appears below the icon by using the clear class.


                            <div>
                                <img class="left pr-1" src="myimage.jpg" / >
                                <p class="clear">
                                In this example, the text appears below the icon by using the clear class.
                                </p>
                            </div>

In this example, the text still appears on the right-hand side of the icon by using the noclear class.


                            <div>
                                <img class="left pr-1" src="myimage.jpg" / >
                                <p class="noclear">
                                In this example, the text still appears on the right-hand side of the icon by using the noclear class.
                                </p>
                            </div>

Justify content

In this example, the icon and the text are aligned along the left side of their parent container.


                        <div class="row justify-content-start" >
                            <div class="col-2">
                                <img src=".../>
                            </div>
                            <div class="col-6">
                                <p>Some text in here...</p>
                            </div>
                        </div>

In this example, the icon and the text are aligned to the centre of their parent container.


                        <div class="row justify-content-center" >
                            <div class="col-2">
                                <img src=".../>
                            </div>
                            <div class="col-6">
                                <p>Some text in here...</p>
                            </div>
                        </div>

In this example, the icon and the text are aligned along the right side of their parent container.


                        <div class="row justify-content-end" >
                            <div class="col-2">
                                <img src=".../>
                            </div>
                            <div class="col-6">
                                <p>Some text in here...</p>
                            </div>
                        </div>

Horizontal centre alignment

In this example, this divider has been centre aligned by using the following class.

<div class="divider-gold w60 center" ></div>

Vertical alignment

In this example,the image is vertically centre-aligned to this line of text.


                        <div>
                            <p>
                            <img class="absmiddle pr-2" src="myimage.jpg"/>
                            In this example, the image is vertically centre-aligned to this line of text.
                            </p>
                        </div>

Classes exist to apply alignment to a number of elements such as boxes, pullquotes, tables and images. Spacing document 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">Centre-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 pr-1" src="... />

If you do not want the text to wrap you need to put the object in a grid column of its own and the text in another column (using a grid class). After that, apply .justify-content-start/.justify-content-center/.justify-content-end class in the parent element (e.g. <div class="row justify-content-left">)to make the layout available. For example:

In this example the text wraps underneath the image but there is some space around the image because we have added padding.


    <div class="row justify-content-end" >
        <div class="col-3">
            <img src=".../>
        </div>
        <div class="col-3">
            <p>Some text in here...</p>
        </div>
    </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.