DIV居中之完全指引
来源:互联网 发布:js注释方法 编辑:程序博客网 时间:2024/04/28 05:16
每一个新手难免感到居中一个DIV没有如自己所期望的容易。居中DIV里面的内容很容易,可以通过设置text-align属性为center, 但是事情往往会变得少许棘手. 当你去垂直居中一个DIV,你会感觉无能为力。
这篇文章的目的是去展示如何在一个页面或DIV里面横向、纵向或横纵向同时居中一个DIV,以及少量的CSS技巧。
在一个页面居中一个DIV:
这个方法兼容任何浏览器,
css
.center-div{ margin: 0 auto; width: 100px; }
实例:http://codepen.io/Tipue/pen/voseD
在一个页面的可用空间里把DIV左右边距设置为auto. 记住,你需要居中的DIV必须有一个宽度属性。
在一个DIV中居中另一个DIV:
这个方法兼容大部分浏览器,
css,
.outer-div{ padding: 30px;}.inner-div{ margin: 0 auto; width: 100px; }
html,
<div class="outer-div"><div class="inner-div"></div></div>
实例:http://codepen.io/Tipue/pen/apDLG
这个方法再次利用margin属性的auto值。里面的DIV必须有一个宽度属性。
在一个DIV中居中另一个带有inline-block值的DIV
这个方法中需居中的DIV不需要设置宽度。这个方法兼容所有自适应模式的浏览器,包含IE8.
CSS,
.outer-div{ padding: 30px; text-align: center;}.inner-div{ display: inline-block; padding: 50px;}
Html,
<div class="outer-div"><div class="inner-div"></div></div>
实例:http://codepen.io/Tipue/pen/Ednlt
属性text-align仅仅对inline元素有效。inline-block值的元素可以很好的显示在一个inline的DIV中,所以外部DIV的text-align属性居中了内部的DIV.
在一个DIV中横向纵向同时居中一个DIV
这个方法使用把边距设为auto实现横向纵向同时居中。 这个方法兼容所有浏览器。
CSS
.outer-div{ padding: 30px;}.inner-div{ margin: auto; width: 100px; height: 100px; }
HTML
<div class="outer-div"><div class="inner-div"></div></div>
实例:http://codepen.io/Tipue/pen/vsKif
在这个方法中内部的DIV必须设置宽度和高度。如果外部的DIV有一个固定高度它将不能正常工作。
在页面的底部居中一个DIV
这个方法使用把边距设为auto和绝对定位外面的DIV。这个方法兼容所有浏览器。
CSS
.outer-div{ position: absolute; bottom: 70px; width: 100%;}.inner-div{ margin: 0 auto; width: 100px; height: 100px; background-color: #ccc;}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
实例: http://codepen.io/Tipue/pen/bwLDh
内部的DIV必须有一个宽度属性。页面底部的边距需要设置外面DIV的bottom属性。
在一个页面中横向纵向同时居中一个DIV:
这个方法再次使用了设置边距为auto和绝对定位外面的DIV。这个方法兼容所有浏览器。
CSS
.center-div{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; background-color: #ccc;}
实例: http://codepen.io/Tipue/pen/CBbna
这个DIV必须有一个宽度和高度值。
原文:http://www.tipue.com/blog/center-a-div/
0 0
- DIV居中之完全指引
- div完全居中
- html5之div居中
- C++字符串完全指引之二
- css如何控制div完全居中
- DIV-CSS 之 让 DIV 居中显示
- C++字符串完全指引之二 - 字符串封装类
- C++字符串完全指引之二 --WIN32字符编码
- C++字符串完全指引之+——+Win32+字符编码
- C++字符串完全指引
- C++字符串完全指引
- C++字符串完全指引
- [Web]完全 Div 实现 页面居中、多行多列等 排版实例
- CSS文字图片div元素居中方法之水平居中
- CSS布局div之水平居中与垂直居中
- 玩转CSS+DIV之图片居中
- div居中之margin: 0 auto;
- html之底部div版权文字居中
- easybuild8000 没连接plc时不显示 “no response ”对话框的方法
- 在Eclipse中使用Hibernate一(组图)
- Vhost-User Applied to Snabbswitch Ethernet Switch
- Sending , Listening for and Reacting to Notifications (发送,监听通知)
- TOMCAT部署项目的方式
- DIV居中之完全指引
- 【转】c#语言中 (int)、int.Parse()、int.TryParse、Convert.ToInt32的区别
- java与object-c的异同(object-c入门一)
- ORACLE sql 根据in查询里面数据的顺序进行排序
- Exy.data.Store 1
- IOS开发常用代码片段合集(三)
- 串口基础类库(WIN32)异步通信 _COM_H 源代码
- 平台碎片化,Android应用开发该如何取舍?
- ListView记事本效果