美文网首页
关于元素居中

关于元素居中

作者: 印第安老斑鸠_333 | 来源:发表于2019-04-10 09:13 被阅读0次

水平居中:

内联元素(inline,inline-block):

在父级元素上添加样式:text-align :center;

块级元素(block):

给自身添加样式:margin-left/right :auto;



垂直居中:

1,可以直接在父级元素添加一样的上下padding,如果是inline-block元素,需要注意给它自身添加vertical-align:top样式,如果不写见下例bug:

bug

2,如果是单行文本垂直居中,在父级元素给死宽高的情况下,设置元素的行高等于父级元素高度。

3,可以用vertical-align样式加上父级元素的::after伪元素居中:

伪元素

4,绝对定位垂直居中,样式给到自身:

已知元素高度 未知元素高度

若想实现水平垂直双居中,加上left,translatex的值,同理

5,display:table-cell,该属性给到父级元素 :

table-cell

6,display:flex布局:

flex

相关文章

  • 关于元素居中

    水平居中: 内联元素(inline,inline-block): 在父级元素上添加样式:text-align :c...

  • 所有CSS居中方法,了解一下?

    目录 水平居中内联元素水平居中块级元素水平居中多个块级元素的水平居中 垂直居中内联元素垂直居中单行内联元素多行内联...

  • css居中方式总结(亲测有效)

    水平居中(行内元素水平居中、块级元素水平居中) 垂直居中 水平垂直居中 行内元素水平居中 text-align: ...

  • CSS之居中问题

    CSS居中主要分为两类 水平居中 (水平居中分为行内元素居中和块状元素居中 块状元素居中又分为 定宽元素 和 不...

  • css 水平垂直居中实现方式

    css 水平垂直居中实现方式 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 块级元素结构 ...

  • margin auto

    1. margin auto 与垂直居中 关于垂直居中的方式方式1:利用父元素position:relative和...

  • 水平居中和垂直居中

    水平居中设置--行内元素 水平居中设置--定宽块级元素 水平居中设置--不定宽块状元素 垂直居中--父元素高度确定...

  • 居中对齐

    行内元素居中[#hang]垂直居中[#hc]水平居中[#hs] 块级元素居中[#kuai]垂直居中[#kc]水平居...

  • CSS元素居中

    水平居中 行内元素居中:在父元素上设置 text-align: center 使文字/图片水平居中。 块级元素居中...

  • 2018-05-22 CSS如何居中

    本文翻译自CSS Tricks 中关于居中的相关介绍。 1、水平居中 内联元素的水平居中(如链接或文本) 可以在一...

网友评论

      本文标题:关于元素居中

      本文链接:https://www.haomeiwen.com/subject/ivjgiqtx.html