Skip to content

Centering

Jump to bottom
cibboy edited this page Sep 3, 2018 · 3 revisions

Centering

Introduction

Block elements are aligned according to their defaults. In order to center them through the use of marging, a specialization class has been introduced.

Furthermore, on wider screens, the whole body of the document (body tag) can be shifted left or right, if desired, in order to accomodate an absolutely-positioned side menu.

Usage

  • Block element centering

    In order to center block elements in their container, use the specialization class centered.

    Example

    A centered picture.

    <img src="picture.jpg" class="centered" />
    Example

    A centered table.

    <table class="centered">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

  • Body lean

    The whole document body can be shifted left or right on wider screens, using specialization classes lean-left and lean-right

    Example
    <body class="lean-left justify">
  <p>This is a paragraph</p>
</body>

Live examples

Live examples

Clone this wiki locally