1. 云栖社区>
  2. >
  3. 正文

CSS下水平居中和垂直居中例子

作者:用户 来源:互联网 时间:2016-09-04 12:58:32

css标签属性

CSS下水平居中和垂直居中例子 - 摘要: 本文讲的是CSS下水平居中和垂直居中例子, 在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案: 一、CSS的水平居中 c


在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案:

一、CSS的水平居中
css水平居中有大致有以下三种情况:

1.文本、图片等行内元素:
给父元素添加属性:text-align:center;

2.确定宽度的块级元素:
添加属性:margin-left:auto;margin-right:auto;

3.不确定宽度的块级元素:
有三种处理方法:

a.把块级元素display:inline;变成行内元素,然后使用text-align:center实现。

b.把块级元素包含在table里,然后对table添加属性margin-left:auto;margin-right:auto;

c.给父元素设置float,然后给父元素设置position:relative;left:50%,子元素设置position:relative;left:-50%。

二、CSS的垂直居中
css垂直居中也大致有三种情况:

1.父元素高度确定,单行文本:
可以设置line-hight值等于其高度值实现;

2.父元素高度确定的多行文本、图片:
两种处理方法:

a.将它们包含在table标签中,td标签默认拥有属性vertical-align:middle;

b.给父元素添加属性:display:table-cell;vertical-align:middle;

3.父元素高度不确定的文本、图片:
给父元素设置相同的上下内边距:padding-top:10px;padding-bottom:10px;

对于脑残的IE6/7可能还要单独的加hack,给父元素设置position:absolute;top:50%;给子元素设置position:relative;top:-50%;

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索css , 标签 属性 css水平垂直居中、css3 垂直水平居中、css实现垂直水平居中、css3水平垂直居中对齐、css文字水平垂直居中,以便于您获取更多的相关知识。