左右对齐 text-align 可以通过 text-align 设置文字的左右对齐方式。
1 2 3 <p style ="text-align: left;" > 文字左对齐</p > <p style ="text-align: center;" > 文字居中对齐</p > <p style ="text-align: right;" > 文字右对齐</p >
text-algin 设置的对齐方式可以适用于所有 display 为 inline 或 inline-blcok 的元素,比如图片、按钮等。比如在搜索的时候,可以设置两个按钮左右居中:
1 2 3 4 5 6 7 8 9 10 11 12 <div style ="text-align: left;" > <button > 搜索</button > <button > 重置</button > </div > <div style ="text-align: center;" > <button > 搜索</button > <button > 重置</button > </div > <div style ="text-align: right;" > <button > 搜索</button > <button > 重置</button > </div >
margin-left / margin-right 可以通过设置 div 的 margin-left 或者 margin-right 为 auto 实现 div 的对齐。默认情况下 div 是靠左对齐的。
1 2 3 <div > 默认左对齐</div > <div style ="margin-left: auto; margin-right: auto;" > div左右居中</div > <div style ="margin-left: auto; margin-right: 0;" > div右对齐</div >
float 可以通过设置 div 的 float 来使 div 在同一行展示,并且设置对齐方式。(单个 div 也可以使用 float 设置对齐方式)
1 2 3 4 5 6 7 8 9 10 <div classs ="parent" > <p > div左对齐</p > <div style ="float: left;" > div 1</div > <div style ="float: left;" > div 2</div > </div > <div classs ="parent" > <p > div右对齐</p > <div style ="float: right;" > div 1</div > <div style ="float: right;" > div 2</div > </div >
使用 float 需要注意两件事情:
设置 float 为 right 的时候,页面的展示顺序和 dom 结构是相反的。按上面的例子,如果想 div1 在 div2 的左边,则需要调整 div1 和 div2 的顺序:
1 2 3 <p > div右对齐(div1在左侧)</p > <div style ="float: right;" > div 1</div > <div style ="float: right;" > div 2</div >
使用 float 时需要给父级清除浮动。如果不清除父级的浮动,会导致父级的高度为 0。下面列举了清除浮动的两种方式: 第一种是使用 clear: both 清除浮动,给父级增加下面的样式:
1 2 3 4 5 .parent ::after { display : block; content : "" ; clear : both; }
另外一种是设置父级的 overflow 为 hidde
1 2 3 .parent1 { overflow : hidden; }
注意: 在实际工作中,如果去掉元素的 overflow: hidden 之后页面布局发生变化,可能是浮动的问题,可以参照第一种方式,用 clear: both 的方式给父级清除浮动。
总结:
如果要实现左右居中,对于 inline 和 inline-block 元素,可以使用 text-align: center
对于单个 block 元素,可以通过设置 margin 的左右边距为 auto 来实现
对于多个 block 元素,使用 float 来设置左对齐或者右对齐
上下对齐 由于 html 渲染元素基本上都是自上而下的对齐方式,实际工作中也不怎么使用底部对齐的方式,这里只介绍上下居中的情况。
height / line-height 如果想让文字上下居中,需要设置文字所在父级容器的 height 和 line-height 相等(适用于单行文字)。
1 <div style ="width: 200px; height: 60px; line-height: 60px; border: 1px solid lightblue;" > 单行文字</div >
height / line-height / vertical-align 对于 inline-block 元素,除了设置 line-height 和 height 相等之外,还需要设置 vertical-align: middle 才能实现上下居中。
比如上面的文字居中的情况,可以给文字增加一级 span 标签并设置 display 为 inline-block,设置 span 的 vertical-align 为 middle(适用于单行文字和多行文字):
1 2 3 <div style ="width: 200px; height: 100px; line-height: 100px; border: 1px solid lightblue;" > <span style ="display: inline-block; vertical-align: middle; line-height: 20px;" > 多行文字多行文字多行文字多行文字多行文字多行文字多行文字</span > </div >
我们可以将任意元素设置成 inline-block 来实现上下居中,比如实现一个左侧 icon 右侧文字的上线居中:
1 2 3 4 <div style ="width: 200px; height: 100px; line-height: 100px; border: 1px solid lightblue;" > <i style ="display: inline-block; width: 20px; height: 20px; background: red; vertical-align: middle;" > </i > <span style ="display: inline-block; vertical-align: middle;" > 文字</span > </div >
总结:
如果要实现单行文字居中,设置 line-height 与父级的 height 相等即可
对于 inline-block 元素,除了设置 line-height 与父级的 height 相等以外,还需要设置 vertical-align 为 middle
上下左右对齐 上面介绍的 CSS 属性,只能单独实现上下对齐或者居中对齐,这里介绍下可以同时设置上下左右对齐的 CSS 属性。
position + top / left + 负 margin 首先,要设置元素的 position 为 relative / absolute / fixed(只有设置 relative 或者 absolute 之后 top 或者 left 的属性才能生效),再设置 top 和 left 都为 50%,margin 为负的子元素宽度的 50%。其中 top 和 margin-top 配合实现上下居中,left 和 margin-left 实现左右居中。
1 2 3 4 5 6 <div style ="position: relative; width: 400px; height: 400px; border: 1px solid lightblue;" > <div style ="position: relative; width: 100px; height: 100px; background-color: lightblue; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px" > </div > </div > <div style ="position: fixed; width: 100px; height: 100px; background-color: lightblue; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px" > </div >
使用这种对齐方式时,因为要设置 margin 为指定的像素值,因此这种情况适用于元素宽高都确定的情况。
如果元素宽高不确定,我们可以使用 tansform 来代替负 margin,可以设置 transform: translate(-50%, -50%)。translate 的两个参数分别为横向和纵向的比例,translate(-50%, 0) 和 left 配合实现左右居中, translate(0, -50%) 和 top 配合实现上下居中。
1 2 3 <div style ="position: relative; width: 400px; height: 400px; border: 1px solid lightblue;" > <div style ="position: relative; display: inline-block; background-color: lightblue; left: 50%; top: 50%; transform: translate(-50%, -50%);" > div 宽度不确定</div > </div >
flex + justify-conetnt + align-items 首先要设置父元素的 display 为 flex,之后在子元素上设置 justify-content 和 align-items 实现上下左右居中。
1 2 3 <div style ="display: flex; align-items: center; justify-content: center; width: 400px; height: 400px; border: 1px solid lightblue;" > <div style ="display: inline-block; background-color: lightblue;" > div 宽度不确定</div > </div >
flex 是一个强大的 css 属性,还可以使不同的 div 在同一行展示:
1 2 3 4 5 <div style ="display: flex; align-items: center; justify-content: center; width: 400px; height: 400px; border: 1px solid lightblue;" > <div style ="width: 100px; height: 100px; background-color: lightblue;" > div1</div > <div style ="width: 100px; height: 100px; background-color: lightcoral;" > div2</div > <div style ="width: 100px; height: 100px; background-color: lightyellow;" > div3</div > </div >
justify-content 为 flex-start 时为左对齐, 为 flex-end 时为右对齐:
1 2 3 4 5 6 7 8 9 10 <div style ="display: flex; align-items: center; justify-content: flex-start; width: 400px; height: 400px; border: 1px solid lightblue;" > <div style ="width: 100px; height: 100px; background-color: lightblue;" > div1</div > <div style ="width: 100px; height: 100px; background-color: lightcoral;" > div2</div > <div style ="width: 100px; height: 100px; background-color: lightyellow;" > div3</div > </div > <div style ="display: flex; align-items: center; justify-content: flex-end; width: 400px; height: 400px; border: 1px solid lightblue;" > <div style ="width: 100px; height: 100px; background-color: lightblue;" > div1</div > <div style ="width: 100px; height: 100px; background-color: lightcoral;" > div2</div > <div style ="width: 100px; height: 100px; background-color: lightyellow;" > div3</div > </div >
flex-items 为 flex-start 为上对齐,为 flex-end 时为下对齐:
1 2 3 4 5 6 7 8 9 10 <div style ="display: flex; align-items: flex-start; justify-content: center; width: 400px; height: 400px; border: 1px solid lightblue;" > <div style ="width: 100px; height: 100px; background-color: lightblue;" > div1</div > <div style ="width: 100px; height: 100px; background-color: lightcoral;" > div2</div > <div style ="width: 100px; height: 100px; background-color: lightyellow;" > div3</div > </div > <div style ="display: flex; align-items: flex-end; justify-content: center; width: 400px; height: 400px; border: 1px solid lightblue;" > <div style ="width: 100px; height: 100px; background-color: lightblue;" > div1</div > <div style ="width: 100px; height: 100px; background-color: lightcoral;" > div2</div > <div style ="width: 100px; height: 100px; background-color: lightyellow;" > div3</div > </div >
总结:
如果元素的宽高确定,可以使用负 margin
如果宽高不确定,可以使用 transform
flex 最强大,不仅可以实现上下最有对齐,还可以使 div 同行展示
table 的对齐 原生 table 中的对齐 table 中的对齐方式比较简单,左右对齐使用 align,上下对齐使用 valign 或者 vertical-align。其中 align 和 valign 为 html 的属性,vertical-algin 为 css 属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <table > <tr > <th > 对齐方式</th > <th > 列1</th > <th > 列2</th > <th > 列3</th > <th > 列4</th > </tr > <tr > <td > 左右对齐:默认左对齐</td > <td align ="left" > 左对齐:align="left"</td > <td align ="center" > 居中对齐:align="center"</td > <td align ="right" > 右对齐:align="right"</td > <td align ="middle" style ="width: 200px; height: 200px;" > <div style ="width: 100px; height: 100px; background-color: lightblue;" > align="middle"</div > </td > </tr > <tr > <td > 上下对齐:默认居中对齐</td > <td valign ="top" > 上对齐:valign="top"</td > <td valign ="middle" > 居中对齐:valign="middle"</td > <td valign ="bottom" > 下对齐:valign="bottom"</td > <td valign ="middle" style ="width: 200px; height: 200px;" > <div style ="width: 100px; height: 100px; background-color: lightblue;" > valign="top"</div > </td > </tr > <tr > <td > 上下对齐:默认居中对齐</td > <td style ="vertical-align: top;" > 上对齐:vertical-align:top</td > <td style ="vertical-align: middle;" > 居中对齐:vertical-align:middle</td > <td style ="vertical-align: bottom;" > 下对齐:vertical-align:bottom</td > <td style ="vertical-align: middle;" style ="width: 200px; height: 200px;" > <div style ="width: 100px; height: 100px; background-color: lightblue;" > vertical-align:top</div > </td > </tr > </table >
总结:
table 中左右对齐用 align,上下对齐用 valign 或 vertical-align
algin / valign / vertical 写在 td 元素上
iview 中 table 的对齐 在 iview 中,可以在 column 中设置 align 属性来指定每列的左右对齐方式。和上面 table 中的居中方式不同,iview 中的左右居中最终是通过设置 text-align 属性实现的,因此,如果想要设置生效,每列的内容应该为 inline 或 inline-block 元素,如果不想设置 display 为 inline 或 inline-block,则需要设置 margin 为 auto 来进行对齐。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 <div id ="app" > <i-table border :columns ="columns" :data ="data" > <template slot-scope ="{ row, index }" slot ="custom" > <div style ="width: 150px; height: 100px; background-color: lightblue;" > align:center(block)</div > </template > <template slot-scope ="{ row, index }" slot ="custom1" > <div style ="width: 150px; height: 100px; background-color: lightblue; display: inline-block;" > align:center(inline-block)</div > </template > <template slot-scope ="{ row, index }" slot ="custom2" > <div style ="width: 150px; height: 100px; background-color: lightblue; margin: 0 auto;" > align:center(block + margin)</div > </template > </i-table > </div > <script > new Vue({ el: '#app' , data: { selected: [], columns: [ { title: '列1' , key: 'column1' , }, { title: '列2' , key: 'column2' , align: 'left' }, { title: '列3' , key: 'column3' , align: 'center' }, { title: '列4' , key: 'column4' , align: 'right' }, { title: '列5' , slot: 'custom' , width: 400, align: 'center' }, { title: '列6' , slot: 'custom1' , width: 400, align: 'center' }, { title: '列7' , slot: 'custom2' , width: 400, align: 'center' }, ], data: [ { column1: '左右对齐(默认左对齐)' , column2: '左对齐' , column3: '居中对齐' , column4: '右对齐' , column5: '' , column6: '' , column7: '' , } ] } }) </script >
因为 iview 中设置对齐方式是针对整个 column 的, 如果表头和内容的对齐方式不一致,就需要分开处理一下,比如表头居中、内容不居中的时候,可以设置 column 的 align 为 center,各列的内容再通过设置 margin 实现各自的对齐方式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <div id ="app" > <i-table border :columns ="columns" :data ="data" > <template slot-scope ="{ row, index }" slot ="custom1" > <div style ="width: 150px; height: 100px; background-color: lightblue;" > 内容左对齐</div > </template > <template slot-scope ="{ row, index }" slot ="custom2" > <div style ="width: 150px; height: 100px; background-color: lightblue; margin-left: auto; margin-right: auto;" > 内容居中对齐</div > </template > <template slot-scope ="{ row, index }" slot ="custom3" > <div style ="width: 150px; height: 100px; background-color: lightblue;margin-left: auto; margin-right: 0;" > 内容右对齐</div > </template > </i-table > </div > <script > new Vue({ el: '#app' , data: { selected: [], columns: [ { title: '列1' , with : 400 , align: 'center' , slot: 'custom1' }, { title: '列2' , width: 400, align: 'center' , slot: 'custom2' }, { title: '列3' , width: 400, align: 'center' , slot: 'custom3' } ], data: [ { column1: '' , column2: '' , column3: '' } ] } }) </script >
iview 目前没有提供设置上下对齐的属性,默认上下居中,如果要设置上下对齐,可以在 column 中增加 className,通过自定义样式实现上下对齐。
总结:
iview 中需要在 column 中增加 align 属性设置左右对齐
iview 中默认上下居中,其他对齐方式需要参照上文讲的上下对齐的方式自定义
附件 示例代码