用户登录

(two column)我们可以控制网格里的文字的对齐方向 .. 这些表示对齐方向的单词,可以用在 gird .. row .. 还有 column 的上面 ..

比如我想让这个网格里的文字居中对齐 .. 可以放在 gird 这个容器的上面 .. 添加一个 center aligned ..

想让它们靠右对齐,可以用一个 right aligned ..

Semantic UI 还可以让我们控制栏的对齐方式 .. 先改造一下这个网格 .. 让这个 1 号栏在单排的一行显示 .. 在它周围添加一个 row ..

现在 1 号栏会在页面的左边 .. 让它在页面上居中可以这样 .. 在这个 grid 容器上,添加一个 centered ...

现在它会在页面的中间显示 ...

下面再看一下垂直居中,还有底部对齐这两种对齐方式 .. 再改造一下这个网格 .. 让每排内容等分成三份 .. three column ..

然后把 1,2,3,4,5 这几个栏放在一排里面 .. 用一个带 row 的容器包装一下 .. 然后我们可以再让 2,3,4 在同一列里 .. 在它们周围再添加一个 column 包装 ..

保存 .. 下面,我们去改变一下第一排内容的栏的对齐方式 .. 现在应该是 top aligned .. 在这个 row 的容器的上面 .. 添加一个 middle aligned ..

现在,你会看到第一排内容里的 1 号栏,还有 5 号栏,会垂直居中显示 ... 再试一下 bottom aligned .. 把 middle 换成 bottom .. 再保存一下 ..

现在 1 号栏,还有 5 号栏,会使用底部对齐的方式显示 .. 默认栏的对齐方式应该是 top aligned ..

对齐 - Aligned《 Semantic UI 网格 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点