老师,水平垂直居中对齐

来源:2-1 结构和样式

twtszz

2020-07-07 18:23:04

老师可以总结一下水平垂直居中对齐的几种方案吗

写回答

1回答

好帮手慕星星

2020-07-07

同学你好,常用的水平垂直居中对齐有以下几种:

1、文字/图片

http://img.mukewang.com/climg/5f0455030903dfc205340520.jpg

http://img.mukewang.com/climg/5f04550c099c70d719160210.jpg

  • text-align:center;实现水平居中

  • 行高等于高度实现文字垂直居中,图片垂直居中还需要添加vertical-align属性

2、块元素水平垂直居中

(1)已知元素宽高,精确计算,通过margin设置

(2)定位

  • 已知宽高

    http://img.mukewang.com/climg/5f0455fd09dece1a05070659.jpg

  • 已知/未知宽高(内容撑起来) 都可以

    http://img.mukewang.com/climg/5f045693092660f706260449.jpg

自己可以测试下,祝学习愉快!

2

0 学习 · 14456 问题

查看课程