如何居中div？

给div设置一个宽度，然后添加margin:0 auto属性

div{

        width:200px;

        margin:0 auto;

   }

如何居中一个浮动元素？

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">

	<head>

		<meta charset="utf-8" />

		<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

		<title></title>

		<style>

			.div {

				position: absolute;

				top: 50%;

				left: 50%;

				margin: -100px 0 0 -150px;

				width: 300px;

				height: 300px;

				border: 1px solid #008800;

			}

		</style>

	</head>

	<body>

		<div class="div">

			元素居中

		</div>

	</body>

</html>

 

如何居中div？如何居中一个浮动元素？的更多相关文章

  1. div中放入一个img元素导致div高度会多出几个像素

    在写代码的时候经常遇到这样一个问题,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px.好了,废话不多说,直接给大家上代码. html代码: ...

  2. HTML5如何垂直居中一个浮动元素

    html如何垂直居中一个浮动元素//方法一:已知元素的高宽#div1{background-color:#6699FF;width:200px;height:200px;position:absolu ...

  3. 居中div，居中浮动的元素

    定位法:position:absolute 如果子级div有定义宽和高的话就可以用这个方法.注意:margin-top,和margin-left的值均为高和宽值的一半 margin:auto法 这个也 ...

  4. 如何垂直居中元素（浮动元素&居中一个<img>）？

    1.如何居中一个浮动元素? 方法一:已知元素的高度   <!DOCTYPE html> <html lang="en"> <head> < ...

  5. 修复IE7浮动元素自动换行的bug

    bug重现以及修复后的表现 2. HTML源码 <!doctype html> <html> <head> <meta charset="utf-8 ...

  6. bfc与浮动元素的关系

    首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...

  7. CSS 教程 - 闭合浮动元素

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...

  8. Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  9. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

随机推荐

  1. iOS开发——Localizable.strings

    这篇写的不多,但是绝对诚意满满.不会像别人一样,要不不详细,要不罗里吧嗦一堆. 1.创建Localizable.strings文件 Command+N—>iOS—>Resource—> ...

  2. LPC1788 nand驱动

    Lpc 1788自带有emc接口用于驱动nandflash,norflash,sdram设备,对于nandflash驱动因为配置简单,时序也简单 首先,针对nandflash而言应当在系统中有三个地址 ...

  3. BZOJ 1497 [NOI2006]最大获利 ——网络流

    [题目分析] 最大权闭合子图. S到集合1容量为获利的大小,集合2到T为所需要付出的相反数. 然后求出最大流,然后用总的获利相减即可. [代码] #include <cstdio> #in ...

  4. R语言中的if-else语句写法

    结构  1 :  if()  xx  else    yy    一行: 结构  2:   if()  {xx} else  {yy} 或者   if(){ xx }else    #此处不能两行写 ...

  5. NSBundle介绍

    原文:http://blog.sina.com.cn/s/blog_8c87ba3b0100t89v.html bundle是一个目录,其中包含了程序会使用到的资源. 这些资源包含了如图像,声音,编译 ...

  6. iOS 之 文件缓存

    对于信息量不是太大的数据,可以使用文件缓存来处理.文件缓存可以缓存字典和数组. 步骤一:创建路径 路径要一级一级往下创建,基本不用考虑创建失败的情况.但是如果创建失败了要怎么做呢?按道理应该提示出来. ...

  7. 一个简单版的波纹css3动画

    ul{width: 300px;border: red;}ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text ...

  8. 创建第一个Android应用程序 HelloWorld

    按照博客的进程,今天应该进行程序编写啦,下面让我们开写一个简单的HelloWorld程序. 提示:这里对于如何使用Eclipse创建一个Android程序就不多讲啦,不会的同学可以去查阅相关文档. 程 ...

  9. Kingbase在初始化时遇到的错误

    FATAL: could not create semaphores: No space left on deviceDETAIL: Failed  system call was semget(58 ...

  10. CRtmpServer分析与应用

    CRtmpServer分析与应用 官方地址:http://www.rtmpd.com/ CRtmpServer是一款不错的开源流媒体服务器,用c++语言编写,跨平台.官方介绍CRtmpServer不仅 ...