如何让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;
随机推荐
- 无法打开物理文件 操作系统错误 5:拒绝访问 SQL Sever
今天分离附加数据库,分离出去然后再附加,没有问题.但是一把.mdf文件拷到其它文件夹下就出错,错误如下: 无法打开物理文件 "E:\db\homework.mdf".操作系统 ...
- 【笔记】BFC 模型知识整理
网上看了很多 BFC 的概念,发现都说得不是很完整和深入,刚好最近看了一些视频教程说到了 BFC 概念所以记录一下. BFC 的概念: BFC 全称:Block format context 块级格式 ...
- HTML5入门要点
要点 HTML5是HTML的最新版本.通过引入心的标签.新的语义和媒体元素,同时要依赖一组支持Web应用的JavaScript库 XHTML不再是Web页面开发标准.开发人员和W3C组织觉决定还是继续 ...
- 结合find和cp批量查找文件并复制到指定文件夹中
find . -name JA1_*001_027 | xargs -i cp {} F:/ 说明: . 表示当前文件夹及其子文件夹中查找 -name 指定待查找文件,可以使用通配符 F:/ 表示 ...
- [python] 2、python使用pyaudio进行录音,及其在python虚拟环境virtualenv中安装遇到的问题
1.pyaudio安装大背景 最近在做智能音箱,需要编写声音拾取代码,我先是百度两篇比较常见的用python进行录音的操作的文章: python写一个录音小程序:http://blog.csdn.ne ...
- smokeping一键安装脚本
#!/bin/bash #Date 2017/11/11 #mail caoyf1992@163.com [ $(id -u) != "0" ] && echo & ...
- iOS-Runtime的那些事...编辑中....
Runtime-iOS的黑魔法,还是很好玩的,消息机制.方法替换简单记录了一点,持续更新.... 1.方法替换 在类load方法中,替换系统方法 + (void)load{ Method oldCol ...
- ASP.NET MVC 播放远程服务器上的MP3文件
问题: 做需求遇到需要播放远程服务器上的MP3音频,使用FTP去获取文件.但是一般都是在页面 <audio> 的src 中直接写文件地址来播放音频.实在不想做临时文件,折腾了半天终于可以通 ...
- The Go Programming Language. Notes.
Contents Tutorial Hello, World Command-Line Arguments Finding Duplicate Lines A Web Server Loose End ...
- log4j源码解析-文件解析
承接前文log4j源码解析,前文主要介绍了log4j的文件加载方式以及Logger对象创建.本文将在此基础上具体看下log4j是如何解析文件并输出我们所常见的日志格式 附例 文件的加载方式,我们就选举 ...