fastreport.net 交叉表居中显示_css各种居中方式收集整理,面试再也别说不会了

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-29 15:24   77   0

1】方法一:只用padding

如果是设置字体居中的话,只需要在放该文本的外部容器设置padding-toppadding-bottom相等即可;但是外部容器不能设置高度,如果设置高度的话,就不能自动的根据文本大小设置高度了。

a8bd63f09016ac3a8dcc8a0fdc8326ec.png

如果设置了外部容器的高度的话,我们又改怎么处理呢?

这时候就需要使用到line-height属性(也就是基线之间的距离),line-heightfont-size之差可以的到行距(行距就是文字顶部和底部之间的距离)。

2990f1b49918f8a0f79f50ded293649a.png

这里我们直接设置子元素的line-height和父元素的高度相等(一般用于单行文字,多行文字的话就不行)

826a8428fab373e9dddbe4a4cc204d17.png

2】方法二:使用弹性盒子Flex

5853c24c27e22a6f0be930c73fae5c90.png

flex-direction:row|colum 主轴是水平的,交叉轴是垂直的 | 交换主轴和交叉轴

justify-content设置基于主轴对齐方式

align-items设置基于交叉轴对齐方式

8929875d2ecc32d2587db2b4c97ccfb5.png

3】方法三:使用列表标签,使用display:table

注意:如果不是使用表格的话,就很少用这种布局

50c193c4ad9a9df44ff3dc1ea5c83840.png

接着子元素设置display:table-cellvertical-align:middle就可以横排显示然后垂直居中

eca811961d5b37c3e7b3c1d443fab44a.png

4】方法四:使用栅格布局grid

9d15cdde21b45befcf3211fd21bd36a8.png

5】方法五:使用定位再配合(translate:负数)或者(margin:负数)

这个方法最大的缺点就是脱离了文档流

3d83445c7eab68add1c622dd51df3226.png

也可以使用margin来调整

3096e8b253e236c052f478609afdceda.png

6】方法六:伪元素再配合inline-block

(inline-block属性需要多个元素才能形成内联元素位置的调整,否则vertical-align属性不能生效)(所有的内联元素中根据高度最高的元素来完成垂直方向的对齐)

创建一个span标签和这个搜索框做兄弟元素,都设置inline-block这样就都具备文本和块级元素属性了,使用vertical-align进行他们之间相对的调整。最后再设置新元素的width:0来隐藏就可以了。

94d2b67abc441fd0a105476800bf097e.png

以这样我们就可以知道可以创建一个伪元素,让其content为空,再拷贝刚才的代码,来实现,

d9e497c84ae082b9baf0882956fca185.png

7】方法七:使用margin: 0 auto;

b352c623cdb963088832eee2c1ff6bf5.png

8】方法八:使用text-align和inline-block

8fa054c7fabe9bf904338c0645de0858.png

9】方法九:定位和transform:translate(-50%,50%);

a70b979f14f05f4699f25b2965971579.png
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP