首页 > 代码库 > 元素水平居中和垂直居中的几种简单方法
元素水平居中和垂直居中的几种简单方法
一、如何使元素在水平方向上居中
1. 使用text-align:center。
在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。
2.在需要居中的元素设置margin:0 auto。
这句CSS的意思为:设置margin-left和margin-right为自动适应父级元素宽度。所以可以使元素水平居中,不过记得设置其width。
二、如何使元素在垂直方向上居中
1.使图片在垂直方向上居中。
div{backgroud-position:0 50%} 。当然,这只适用于背景图!
2.使只含文本的元素居中。
在css里设置它的行高:line-height:xx px。 xx为其本身height值。
3.使包含文本和其他元素都同时居中。
仅仅设置行高是不够的,应该再加上display:table-cell;vertical-align:middle.这样就可以使其垂直居中。
我以上提到的都是常用的方法,不全面,也没深入讲。还有用CSS expression方法实现水平居中的等等方法。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。