如何让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;
随机推荐
- MySQL浅谈 LEFT JOIN
On条件(在“A left join b on conditional_expr”)决定如何从table B 中检索数据行(Matching-State); 如果B中没有行匹配On 条件,额外的B的所 ...
- CCF系列之出现次数最多的数(201312-1)
试题名称: 出现次数最多的数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个正整数,找出它们中出现次数最多的数.如果这样的数有多个,请输出其中最小的一个. 输入格 ...
- C# 将Access中时间段条件查询的数据添加到ListView中
C# 将Access中时间段条件查询的数据添加到ListView中 一.让ListView控件显示表头的方法 在窗体中添加ListView 空间,其属性中设置:View属性设置为:Detail,Col ...
- i2c总线的oled12864屏的u8x8运用总结
github网址链接 https://github.com/olikraus/u8g2/wiki/u8x8reference#print 用到的库文件 #ifdef U8X8_HAVE_HW_SPI ...
- linux_软件安装策略和升级策略
运维3大原则:可靠.稳定.简单 尝试新的软件,一切都是未知的,也就是说不可靠,不可预测也就意味的不稳定,解决问题,通过百度和谷歌工具有可能找不到解决方法,只能通过官方文档来解决问题,大大增加了排错时间 ...
- JavaScript Hoisting
Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope ...
- common-logging--源码之SimpleLog
common-logging源码Log接口 在common-logging的源码中,将log核心类抽象成了一个Log接口. 这里贴出Log接口的源码: /* * Licensed to the Apa ...
- ssh密钥分发与ansible
笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 当我们公司的服务器达到几十台或几百台或更高的时候,利用批量管理工具管理系统是我们要做的 常用的批量管理工具有ans ...
- 【转载】C#.NET WebApi返回各种类型(图片/json数据/字符串),.net图片转二进制流或byte
C#.NET WebApi返回各种类型(图片/json数据/字符串),.net图片转二进制流或byte 转载:http://www.itdos.com/Mvc/20150302/0741255.htm ...
- VLAN 模式下的 OpenStack 管理 vSphere 集群方案
本文不合适转载,只用于自我学习. 关于为什么要用OpenStack 管理 vSphere 集群,原因可以有很多,特别是一些传统企业,VMware 的使用还是很普遍的,用 OpenStack 纳管至少会 ...