如何让div水平居中呢?
一百度div居中,多数都是一个答案,但是有时候这种方法并不是万能的。。。不废话,将我知道的方法都列举一下好了,随时更新。
1、设置width值,指定margin-left和margin-right为auto(或margin: 0 auto;)(多数人都知道的方法,就不举例子了)
2、设置width,利用margin-left为width的负一半和相对定位实现水平居中(width和margin-left可以设置百分比)
#demo {
width:500px ;
height:300px;//高度可以不设,用content撑起高度
margin: 0 0 0 -250px;//(或者直接设置margin-left: -250px;)
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
<div id="demo"></div>
3、待续。。。
如何让div水平居中呢?的更多相关文章
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- div水平居中
1.先给它外层的div定位并left:position:absolute;left:50%; 2.获取当前元素div的宽度,并除以2 3.改变它的css:margin-left:-(获取当前元素div ...
- div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】
大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
- 第三章Div水平居中
1.div居中 text-align:center可以让元素里面的文字内容居中,但并不能让div居中.要让div水平居中必须设置div宽度,外边距设置为margin:0 auto <%@ Pag ...
- css+div水平居中
实现div内容水平居中 实现方案一:margin:0 auto; div{ height:100px; width:100px; background:red; margin:0 auto; } &l ...
- 大div中,三个小div水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div水平居中和垂直居中
水平居中和垂直居中 水平居中包含两种情况: 块级元素的水平居中:margin:0px auto; 文字内容的水平居中:text-align: center; ...
- [转]CSS网页布局:div水平居中的各种方法
http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...
- div 水平居中
对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto;
随机推荐
- mybatis_SQL映射(3)
文章摘录自:http://blog.csdn.net/y172158950/article/details/17304645 1. 表关联 a) 嵌套查询(传说中的1+N问题) <resultM ...
- mysql 查询今天,昨天,上个月sql语句 注解
今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天Select * FROM 表名 Where TO_DAYS( NOW( ) ...
- C/C++ typedef
body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...
- junit4X系列--Assert与Hamcrest
原文出处:http://www.blogjava.net/DLevin/archive/2012/05/12/377960.html.感谢作者无私分享 到目前,JUnit4所有的核心源码都已经讲解过了 ...
- linkin大话面向对象--组合
继承是实现类重用的重要手段,但是它有一个最大的坏处:破坏封装.相比之下,组合也是实现类重用的重要方式,但是采用组合方式实现类重用则能提供更好的封装性.比如人有手一样,在人的类中增加一个手的属性. 何时 ...
- java基础-静态,非静态(构造)代码块,类加载
static block and non-static block(constructor block) [toc] 想来想去,先来一题比较好 public class Foo { public st ...
- Bug等级判断标准
测试的问题大致可分为以下几个类型:致命问题严重问题一般问题轻微问题 判断标准如下1.致命问题:造成系统崩溃.死机.死循环,导致数据库数据丢失,与数据库连接错误,主要功能丧失,基本模块缺失等问题.如:代 ...
- 浅析调用JSR303的validate方法, 验证失败时抛出ConstraintViolationException
废话不多说,直接进入正题:如何使用JSR303的validate,进行数据校验,失败后直接抛出异常加入流转信息中,并在form页面提示出来. 首先我们为了启用验证,需要向 项目中添加Bean验证的实现 ...
- display:inline-block下,元素不能在同一水平线及元素间无margin间距的问题解决方法
在前端页面编辑中,常常用于块元素横排列时,我们会用到浮动或者dispaly:inline-block: 浮动虽然好用,效果明显,但是会存在潜在BUG,(暂且不论):那么display:inline-b ...
- 认识python中的set集合及其用法
python中,集合(set)是一个无序排列,可哈希, 支持集合关系测试,不支持索引和切片操作,没有特定语法格式, 只能通过工厂函数创建.集合里不会出现两个相同的元素, 所以集合常用来对字符串或元组或 ...