如何居中div

div居中

博客分类： 
  • 笔记
csshtmldiv 
CSS中怎么让div居中 CSS 如何使div层水平居中  今天用CSS遇到个的问题,div本身没有定义自己居中的属性,  网上很多的方法都是介绍用上级的text-align: center然后嵌套一层div来解决问题.  可是事实上这样的方法科学吗?  经过网络搜索和亲自实验得出以下结论:  正确的也是对页面构造没有影响的设置如下:  对需要水平居中的div层添加以下属性: 
margin-left: auto;  margin-right: auto; 
经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!  郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.  问题到底出在哪里呢?  感谢网友乐天无用帮忙找出了这个邪门问题的原因.  原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.  问题并不在CSS而在XHTML网页本身.  需要加上这样的代码才能使得上述设置有效果:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.  以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版. 
如何使DIV居中 
主要的样式定义如下：  body {TEXT-ALIGN: center;}  #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 

说明： 
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只 
要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 


如何使图片在DIV 中垂直居中，用背景的方法。举例： 
body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;} 

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30" 


如何使文本在DIV中垂直居中 
如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下： 
<html> 
<head> 
<style> 
body{TEXT-ALIGN: center;} 
#center{ MARGIN-RIGHT: auto; 
MARGIN-LEFT: auto; 
height:200px; 
background:#F00; 
width:400px; 
vertical-align:middle; 
line-height:200px; 
} 
</style> 
</head> 
<body > 
<div id="center"><p>test content</p></div> 
</body> 
</html>

转载于:https://www.cnblogs.com/9192miss/p/3942231.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/260071.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

c语言小数加分,求救：c语言课程设计 员工工资管理程序 有加分的。谢谢

c语言小数加分,求救：c语言课程设计 员工工资管理程序 有加分的。谢谢

#define SIZE 50/* 定义结构体 */struct date{int month;int day;int year;};typedef struct employee{char name[50] ,num[10],sex,edu[10],duty[15];int age,income;struct employee *next;}empl[SIZE];/* 逐项输出链表中的内容 */void view (struct employee* head){struct …
阅读更多...
老师能提供什么帮助

老师能提供什么帮助

老师能提供什么帮助&#xff1f; 这篇本来想上周写的&#xff0c;原计划在感恩节推送&#xff0c;可惜太忙&#xff0c;计划赶不上变化。 时隔十年&#xff0c;我又要给计算机系的同学们上课了&#xff0c;心里还是有些小激动的。我下学期要开一门大课叫程序设计与数据结构,涵盖…
阅读更多...
(转)SystemProcessesAndThreadsInformation

(转)SystemProcessesAndThreadsInformation

http://hi.baidu.com/hanjdud8606/item/7a970408a95acc843d42e27f NTSTATUS NTAPI ZwQuerySystemInformation(ULONG SystemInformationClass,PVOID SystemInformation,ULONG SystemInformationLength,PULONG ReturnLength ); 第一个参数是一个枚举类型&#xff0c;传入的是你需…
阅读更多...
12个Icon图标资源网站

12个Icon图标资源网站

1.除了Icon以外&#xff0c;还有很多不错的UI设计素材。 地址&#xff1a;http://worldui.com/2.除了免费Icon资源下载以外&#xff0c;还提供Icon定制的付费服务。地址&#xff1a;http://dryicons.com/3.很喜欢这个icon资源站的展示方式。地址&#xff1a;http://www.icotrip…
阅读更多...
python列表split_Python-split()函数实例用法讲解

python列表split_Python-split()函数实例用法讲解

在Python中&#xff0c;split() 方法可以实现将一个字符串按照指定的分隔符切分成多个子串&#xff0c;这些子串会被保存到列表中(不包含分隔符)&#xff0c;作为方法的返回值反馈回来。split函数用法split(sepNone, maxsplit-1)参数sep – 分隔符&#xff0c;默认为所有的空字…
阅读更多...
go语言基础 -- 闭包

go语言基础 -- 闭包

什么是闭包 闭包的概念&#xff0c;在很多语言中都有&#xff0c;比如python&#xff0c;这里要介绍的go&#xff0c;闭包就是函数与其相关的环境组合的一个整体。 我们通过一个例子来理解闭包&#xff1a; func Addfunc() func (x int) int {var n int 0// 返回的是一个函数…
阅读更多...
linux中解决SSH连接慢问题

linux中解决SSH连接慢问题

2019独角兽企业重金招聘Python工程师标准>>> 现在连接linux服务器一般都是使用SSH远程连接的方式。最近新装了一台服务器&#xff0c;发现telnet时速度很快&#xff0c;ping时一切也正常&#xff0c;但SSH连接的时候却很慢。经过网上资料查询&#xff0c;大致是有以…
阅读更多...
利用Theme自定义Activity进入退出动画

利用Theme自定义Activity进入退出动画

有没有觉得Activity的默认动画太快了或者太难看了。。我原来使用Activity.overridePendingTransition来自定义Activity的进入动画&#xff0c;却发现没法定义退出的动画。结果就发现了强大的Theme和Style&#xff0c;之后还需要好好研究一下。具体是这样子的&#xff1a;在Andr…
阅读更多...
阿里云深圳数据中心正式开放

阿里云深圳数据中心正式开放

阿里云深圳数据中心正式开放 ​ 8月29日&#xff0c;阿里云深圳数据中心正式开放运营&#xff0c;这是继杭州、青岛、北京、香港之后&#xff0c;我们在全球开放的第五个数据中心。 深圳数据中心主要辐射以深圳、广州为中心的华南区域&#xff0c;以满足这一区域内的商贸企业、…
阅读更多...
vue 文件及描述信息一起上传_用Vue实现一个大文件上传和断点续传

vue 文件及描述信息一起上传_用Vue实现一个大文件上传和断点续传

前言这段时间面试官都挺忙的&#xff0c;频频出现在博客文章标题&#xff0c;虽然我不是特别想蹭热度&#xff0c;但是实在想不到好的标题了-。-&#xff0c;蹭蹭就蹭蹭 :)事实上我在面试的时候确实被问到了这个问题&#xff0c;而且是一道在线 coding 的编程题&#xff0c;当时…
阅读更多...
c语言函数声明定义参数命名,C语言函数声明与定义

c语言函数声明定义参数命名,C语言函数声明与定义

C语言函数声明与定义教程在C语言函数声明与定义语法type funcName(paramType1 param1, paramType2 param2){// 执行语句...return val}参数参数描述type函数的返回值类型&#xff0c;如果没有任何返回值&#xff0c;则写 void&#xff0c;不可以死省略不写。funcName函数名。pa…
阅读更多...
gcc g++ Linux下动态库_静态库

gcc g++ Linux下动态库_静态库

关于Unix静态库和动态库的分析 基本概念 库有动态与静态两种&#xff0c;动态通常用.so为后缀&#xff0c;静态用.a为后缀。 例如&#xff1a;libhello.so libhello.a 为了在同一系统中使用不同版本的库&#xff0c;可以在库文件名后加上版本号为后缀,例如&#xff1a; libhell…
阅读更多...
SNF开发平台WinForm之五-高级查询使用说明-SNF快速开发平台3.3-Spring.Net.Framework

SNF开发平台WinForm之五-高级查询使用说明-SNF快速开发平台3.3-Spring.Net.Framework

5.1运行效果&#xff1a; 5.2开发实现&#xff1a; 1、按上面效果来说&#xff0c;先来看一下在程序当中如果调用。第一步在页面拖拽一个按钮为“高级查询”&#xff0c;事件上写下如下代码&#xff1a; 如果是单表查询的话&#xff0c;只需要传GridView就行&#xff0c;如果是…
阅读更多...
【转】PowerDesigner表结构和字段大小写转换

【转】PowerDesigner表结构和字段大小写转换

【转自】http://blog.csdn.net/xysh1991/article/details/8016192 使用方法&#xff1a;进入PowerDesigner&#xff0c;打开一个PDM&#xff0c;在菜单栏找到&#xff1a;Tools – Excute Commands – Edit/Run Script&#xff0c;或者直接按CtrlShiftX调出脚本执行窗口&#x…
阅读更多...
新唐c语言怎么计算指数运算,C语言位域精解

新唐c语言怎么计算指数运算,C语言位域精解

有些信息在存储时&#xff0c;并不需要占用一个完整的字节&#xff0c; 而只需占几个或一个二进制位。例如在存放一个开关量时&#xff0c;只有0和1 两种状态&#xff0c;用一位二进位即可。为了节省存储空间&#xff0c;并使处理简便&#xff0c;&#xff23;语言又提供了一种…
阅读更多...
华为荣耀5cvs华为v9play_华为荣耀v9play和荣耀9哪个好_华为荣耀v9play和荣耀9对比评测_飞翔教程...

华为荣耀5cvs华为v9play_华为荣耀v9play和荣耀9哪个好_华为荣耀v9play和荣耀9对比评测_飞翔教程...

华为荣耀v9play是华为最新发布的手机&#xff0c;这款手机可以说是华为荣耀v9的青春版&#xff0c;把这款手机跟华为荣耀9对比起来哪款更好呢&#xff1f;下面就为大家带来详细的华为荣耀v9play和荣耀9对比评测&#xff01;荣耀9介绍&#xff1a;6.12日下午&#xff0c;荣耀在上…
阅读更多...
颈椎病防治指南

颈椎病防治指南

2019独角兽企业重金招聘Python工程师标准>>> 长期从事财会、写作、打字、办公室等职业的工作人员&#xff0c;由于长期低头伏案工作&#xff0c;使颈椎长时间处于屈曲位或某些特定体位&#xff0c;不仅使颈椎间盘内的压力增高&#xff0c;而且也使颈部肌肉长期处于非…
阅读更多...
如何熟悉一个开源项目

如何熟悉一个开源项目

转自&#xff1a;http://www.blogjava.net/killme2008/archive/2012/05/22/378885.html 你有个任务&#xff0c;需要用到某个开源项目;或者老大交代你一个事情&#xff0c;让你去了解某个东西。怎么下手呢&#xff1f;如何开始呢&#xff1f;我的习惯是这样&#xff1a; 1.首先…
阅读更多...
离散序列卷积c语言,数电实验一离散卷积的C语言编程.ppt-资源下载在线文库www.lddoc.cn...

离散序列卷积c语言,数电实验一离散卷积的C语言编程.ppt-资源下载在线文库www.lddoc.cn...

数电实验一 离散卷积的C语言编程.ppt实验一 离散卷积的C语言编程实验,DSP实验室,实验性质,综合设计性实验,实验目的,1 了解和认识常用的各种信号&#xff1b; 2 掌握卷积的定义和计算方法&#xff1b; 3 掌握在计算机中生成以及绘制信号序列图的方法。,实验原理,离散时间系统中…
阅读更多...
三个数差的平方公式推导过程_平方差公式证明推导过程及运用详解（数学简便计算方法之一）...

三个数差的平方公式推导过程_平方差公式证明推导过程及运用详解（数学简便计算方法之一）...

​平方差公式是小学奥数计算中的常用公式。通常写为&#xff1a;a-b(ab)x(a-b)它的几何方法推导过程是这样的&#xff1a;如下图所示&#xff0c;四边形ABCD和四边形DEFG为正方形&#xff0c;边长分别为a和b&#xff0c;求阴影部分面积。纯手绘显然&#xff0c;阴影部分面积有2…
阅读更多...
最新文章

Copyright @ 2022~2023