首页 > 代码库 > 各种效果,水平居中或者是垂直居中
各种效果,水平居中或者是垂直居中
(1)水平居中行内元素:text-align:center;
(2)当被设置元素为块状元素时用text-align:center就不起作用了,这时也分为两种情况:定宽(有width值)块状元素和不定宽块状元素
满足 定宽 和 块状 两个元素 是可以通过设置左右margin值为auto 来实现居中的 比如 margin{0,auto}
(3)被设置元素为不定宽块状元素时 改变块状元素的display为inline类型(设置为行内元素显示),然后使用 text-align:center 来实现水平居中效果
(4)通过给父级元素设置float ,然后给父级元素设置position:realtive和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
(5)父元素高度确定的单行文本, 设置它为垂直居中:父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和?line-height?高度一致来实现的。
(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。
(6)父元素高度确定的多行文本:方法一 使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
各种效果,水平居中或者是垂直居中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。