CSS居中之美(二)——水平居中
2016-07-11 15:34
232 查看
如何实现元素的水平居中
1、使用margin来实现水平居中
html<div class="horizontal">content</div>
CSS
.horizontal { width: 200px; margin: 0 auto; }
使用上面方法实现元素水平居中一定要让元素满足两个条件:其一,元素需要有一个固定宽度值;其二元素的margin-left和margin-right都必须设置为auto,这两个条件少了任何一个都无法让元素达到水平居中的效果。
2、使用绝对定位实现水平居中
实现固定宽度的水平居中,我们还可以使用绝对定位配合负的margin来实现,具体代码如下:Html
<div class="horizontal">content</div>
CSS
.horizontal { width: 960px; position: absolute; left: 50%; margin-left: -480px;/*此值等于“-width/2”*/ }
3、单行文本的水平居中
这种方法主要是针对单行文本居中或者前面介绍的table格式居,主要运用的是text-align:center让元素水平居中:.testH{text-align:center;}
4、图片的水平居中
我们前面说了图片的垂直居中,那么他的水平居中呢:Html
<div class="horizontal"> <p>nihao</p> <img src="blog1.png" alt=""> </div>
CSS
.horizontal { text-align: center; /*记住是让他们的父元素使用text-align属性*/ }
我们来看一下结果:
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表