Horizontal Alignment

To align text horizontally within block level elements you can use one of the following classes:

• text-left
• text-center
• text-right
• text-justify

In the following HTML table, text content is aligned using left (default), center, right and justify.

<table class="table table-bordered col-padding-md width-xl">
  <tr>
    <td>Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.</td>
  </tr>
  <tr class="text-center border-xs pad-md">
    <td>Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.</td>
  </tr>
  <tr class="text-right border-xs pad-md">
    <td>Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.</td>
  </tr>
  <tr class="text-justify border-xs pad-md">
    <td>Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.</td>
  </tr>
</table>

Vertical Alignment

To align inline elements vertically within another element's line box you can use one of the following classes:

• vertical-top
• vertical-middle
• vertical-bottom
• vertical-text-top
• vertical-text-bottom
• vertical-sub
• vertical-super

In the following example the class control-label-lg has been added to each table data cell to increase the line-height. It is important to know that vertical text alignment works in the context of an elements line box.

<table class="table table-bordered col-padding-md">
  <tr>
    <td class="control-label-lg">
      <span class="text-bold pad-right-xs">―</span>
      <span class="vertical-top">vertical-top</span>
    </td>
    <td class="control-label-lg">
      <span class="text-bold pad-right-xs">―</span>
      <span class="vertical-middle">vertical-middle</span>
    </td>
  </tr>
  <tr>
    <td class="control-label-lg">
      <span class="text-bold pad-right-xs">―</span>
      <span class="vertical-bottom">vertical-bottom</span>
    </td>
    <td></td>
  </tr>
  <tr>
    <td class="control-label-lg">
        <span class="text-bold pad-right-xs">―</span>
        <span class="vertical-text-top">vertical-text-top</span>
    </td>
    <td class="control-label-lg">
        <span class="text-bold pad-right-xs">―</span>
        <span class="vertical-text-bottom">vertical-text-bottom</span>
    </td>
  </tr>
  <tr>
    <td class="control-label-lg">
        <span class="text-bold pad-right-xs">―</span>
        <span class="vertical-sub">vertical-sub</span>
    </td>
    <td class="control-label-lg">
        <span class="text-bold pad-right-xs">―</span>
        <span class="vertical-super">vertical-super</span>
    </td>
  </tr>
</table>

Line Height

WebUI does not provide utility classes to apply various line heights, as this could promote typographical inconsistencies.

Block Level Elements

To align block level HTML elements horizontally you can use one of the following classes. They are provided for when the basic WebUI CSS files are imported only, which do not include flexbox or layout properties. A list of layout properties can be found in the Layout Properties section.

• align-left
• align-center
• align-right
• align-media-left
• align-media-center
• align-media-right

The difference between the align-* and align-media-* classes is that align-* classes will use margin only to align content, but align-media-* classes will change the display property of the element being aligned to display: table. This means that, when using align-* classes, a block level element will stretch to any max-width that may be applied. On the other hand, align-media-* classes will cause an element to shrink to its content size when aligned.

<div class="gap-vertical-sm">
  <div class="align-center pad-xs border-sm border-default" 
  style="max-width: 20rem;">
    Lorem ipsum
  </div>
  <div class="align-media-center pad-xs border-sm border-default" 
  style="max-width: 20rem;">
    Lorem ipsum
  </div>
</div>

Inline Elements

In order to align images or other inline media elements such as video you should use the align-media-* classes. Using align-* classes on their own will not work for inline elements, unless you have already added the image class also, in which case either will work. This is because the image class sets the display property to block.

<div class="gap-vertical-sm">
  <img src="images/landscape_1_small.jpg" class="align-media-center" />
  <img src="images/landscape_1_small.jpg" class="image align-center" />
</div>

Float Alignment

A set of classes using float alignment are available as follows:

• float-left
• float-right
• float-left-stacked
• float-right-stacked

The float-left and float-right classes use float: left and float: right CSS styles. You can also use float-left-stacked and float-right-stacked to align an element and stack all of its child elements vertically at the same time.

<div class="container gap-vertical-sm float-right-stacked">
  <img src="images/landscape_1_small.jpg" class="image" />
  <img src="images/landscape_1_small.jpg" class="image" />	
</div>

<div class="container gap-vertical-sm float-left-stacked">
  <img src="images/landscape_1_small.jpg" class="image" />
  <img src="images/landscape_1_small.jpg" class="image" />	
</div>

NOTE: It's a good idea to use the container class on any parent wrapper element, so that its border edge is cleared to below any floated elements. The standard container uses a clearfix method.

For more information on containers, see the Containers section.