DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

css居中代码是什么?

  • css居中代码是什么?

  • 已被浏览: 31 次2020年09月03日    来源:  https://www.dmozdir.org/
  • 在css中,居中代码有:1、“text-align:center;”让内联元素水平居中;2、“margin:0 auto;”让块级元素水平居中;3、“line-height:高度值;”让单行内联元素垂直居中。
    css居中代码是什么?下面本篇文章给大家总结一些CSS居中的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    CSS居中的方式

    1、内联元素水平居中

    1.jpg

    2、块级元素水平居中

    2.jpg

    3、多块级元素水平居中(利用inline-block)

    3.jpg

    4、多块级元素水平居中(利用display: flex)

    4.jpg

    5、垂直居中(单行内联(line-height)元素垂直居中)

    5.jpg

    6、垂直居中(多行元素垂直居中利用表布局(table vertical-align: middle))

    6.jpg

    7、垂直居中(多行元素垂直居中利用flex布局(flex-direction: column))

    7.jpg

    8、伪元素—利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的

    8.jpg

    9、块级元素垂直居中(固定高度的块级元素)

    9.jpg

    10、块级元素垂直居中(未知高度的块级元素)

    10.jpg

    11、水平垂直居中(固定宽高元素水平垂直居中)

    11.jpg

    12、水平垂直居中(未知宽高元素水平垂直居中)

    12.jpg

    13、水平垂直居中(利用flex布局)

    13.jpg

    14、水平垂直居中(利用grid布局)

    14.jpg

    15、水平垂直居中(屏幕上水平垂直居中)

    15.jpg

    更多web前端知识,请查阅 DMOZ中文网站分类目录 !!

    以上就是css居中代码是什么?的详细内容,更多请关注DMOZ中文网站分类目录其它相关文章!


    以上信息来源于网络,如有侵权,请联系站长删除。

    TAG:CSS 居中代码

  • 上一篇:eclipse中css属性如何设置自动提示?
  • 与“css居中代码是什么?”相关的资讯
  • CSS手绘图形
  • CSS Background Patterns - 21+ 免费线上背景 CSS 样式,可即时预览与设定颜色间距及透明度并一键複製
  • CSS常见反爬技术
  • vsCode配置自动补全css兼容性代码 ,解决 Autoprefixer 3.0无效
  • CSS精灵图与字体图标