Pure.CSS对齐形式介绍

Pure.CSS是一个小巧、极简的CSS库，其中包含了一系列的对齐方式。这些对齐方式非常的直观和易于使用，使得开发者可以快速地实现布局需求。

实现方式

水平对齐

Pure.CSS提供了两种水平对齐方式：

• 左对齐：使用 .pure-u-* 类可以实现左对齐。这里的 * 表示格子占据总格子数的比例。

<div class="pure-g">
    <div class="pure-u-1-2">Col 1</div>
    <div class="pure-u-1-2">Col 2</div>
</div>

• 居中对齐：使用 .pure-u-*-center 类可以实现居中对齐。同样的，这里的 * 表示格子占据总格子数的比例。

<div class="pure-g">
    <div class="pure-u-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xlg-1-5 pure-u-xxlg-1-6 pure-u-sm-1-2 pure-u-sm-center">居中对齐</div>
</div>

垂直对齐

Pure.CSS提供了两种垂直对齐方式：

• 垂直居中：使用.pure-u-*-middle 类可以实现垂直居中对齐。同样的，这里的 * 表示格子占据总格子数的比例。

<div class="pure-g">
    <div class="pure-u-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xlg-1-5 pure-u-xxlg-1-6 pure-u-sm-1-2 pure-u-sm-middle">垂直居中</div>
    <div class="pure-u-1-2 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xlg-4-5 pure-u-xxlg-5-6 pure-u-sm-1-2 pure-u-sm-middle">垂直居中</div>
</div>

• 底部对齐：使用.pure-u-*-bottom 类可以实现底部对齐。同样的，这里的 * 表示格子占据总格子数的比例。

<div class="pure-g">
    <div class="pure-u-1-2 pure-u-md-1-3 pure-u-lg-1-4 pure-u-xlg-1-5 pure-u-xxlg-1-6 pure-u-sm-1-2 pure-u-sm-bottom">底部对齐</div>
    <div class="pure-u-1-2 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xlg-4-5 pure-u-xxlg-5-6 pure-u-sm-1-2 pure-u-sm-bottom">底部对齐</div>
</div>

总结

Pure.CSS的对齐形式简单实用，几乎可以适应全部的排版需求。它不仅易于使用，而且还可以提高页面的展现效果。如果您正在寻找一个小巧、简洁、易于掌握的CSS库，Pure.CSS会是一个非常好的选择。