如何居中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. STM32驱动TEA5767收音机模块

    Tea5767是飞利浦公司出的一款集成化的收音机芯片,大四的时候机缘巧合遇到了这个芯片,用了一下,写点资料 主要特性 TEA5767HN是一款低功耗立体声收音IC,广泛应用于手机MP3 .MP 4 播 ...

  2. VS2010下创建的VB.NET项目打包发布安装包的流程

    VS2010下创建的VB.NET项目打包发布安装包的流程 参考:http://blog.csdn.net/liuyanlinglanq/article/details/8609675  关于relea ...

  3. diff命令参数

    diff命令参数: diff - 找出两个文件的不同点 总览 diff [选项] 源文件 目标文件 描述 在最简单的情况是, diff 比较两个文件的内容 (源文件 和 目标文件). 文件名可以是 - ...

  4. linux下安装mysql（编译mysql源码）

    编译所需软件地址 http://mysql.mirror.kangaroot.net/Downloads/  -- 下载需要的mysql版本例如mysql-5.5.39.tar.gz    目前还不太 ...

  5. debugger 调试的一些经验

    1. 如果没有firebug , 可以用firebug-lite.js 内嵌的调试方式. 2. console.log 不是所有浏览器都支持console.log 在IE或者没有调试窗口的浏览器中,c ...

  6. 2.14. 删除托管对象（Core Data 应用程序实践指南）

    删除托管对象,只要调用托管对象上下文的deleteObject 或 deleteObjects就可以了.同样,真正的删除,要在调用save:之后.

  7. 响应的系统设置的事件——重写onConfigurationChanged响应系统设置更改

    如果程序需要监听系统设置的更改,则可以考虑重写Activity的onConfigurationChanged(Configuration newConfig)方法,该方法是一个基于回调的事件处理方法: ...

  8. Failed to register Grid Infrastructure type ora.mdns.type

    安装11g的集群软件的时候,在最后运行root.sh脚本时候,没有执行成功,最后提示如下错误: [root@r2 ~]# /u01/app/11.2.0/grid_1/root.sh Performi ...

  9. 看完让你彻底搞懂Websocket原理

    偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗 ...

  10. ASP.NET MVC和jQuery DataTable整合

    本文包含代码示例说明如何jQuery插件开发者可以集成到ASP.NET MVC应用程序. 下载源代码- 87.4 KB Introduction The jQuery DataTables plug- ...