各种效果,水平居中或者是垂直居中

Posted 无言

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了各种效果,水平居中或者是垂直居中相关的知识,希望对你有一定的参考价值。

(1)水平居中行内元素:text-align:center;

(2)当被设置元素为块状元素时用text-aligncenter就不起作用了,这时也分为两种情况:定宽(有width值)块状元素和不定宽块状元素

       满足 定宽 和 块状 两个元素 是可以通过设置左右margin值为auto 来实现居中的 比如 margin0auto

(3)被设置元素为不定宽块状元素时 改变块状元素的displayinline类型(设置为行内元素显示),然后使用 text-aligncenter 来实现水平居中效果

(4)通过给父级元素设置float ,然后给父级元素设置positionrealtiveleft:50%,子元素设置positionrelativeleft-50%来实现水平居中。

(5)父元素高度确定的单行文本, 设置它为垂直居中:父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和?line-height?高度一致来实现的。

      (height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

(6)父元素高度确定的多行文本:方法一 使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

以上是关于各种效果,水平居中或者是垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

css各种水平垂直居中

实现div内容水平垂直居中

DIV文字水平垂直居中的方法

excel中怎样使表格数据显示为水平居中和垂直居中?

总结一下各种居中(内联元素块级元素浮动元素绝对定位元素)*(水平垂直)

CSS制作水平垂直居中对齐 多种方式各有千秋