如何居中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调用相机,相册,上传头像

    一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate @interface ViewController : UIViewController 复制代码 四.实现按钮事件 -(IBAc ...

  2. css3 翻牌效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  3. contextMenu,右键菜单

    <!DOCTYPE html> <html> <head> <title>ContextMenu Event Example</title> ...

  4. hashchange

    <!DOCTYPE html> <html> <head> <title>Hash Change Example</title> <s ...

  5. 1.3.1. 新建Xcode项目并设置故事板（Core Data 应用程序实践指南）

    创建名为Grocery Dude的Single View程序,并按默认设置处理,不勾选Core Date 和 Git. 设计故事板: 选择Main.Storyboard 拖放一个 Table View ...

  6. 怎样看paper 最有效率

    thinking more after reading. Don't just read the papers.in addition, at begining, you'd better focus ...

  7. 基因探针富集分析（GSEA）& GO & pathway

    http://blog.sina.com.cn/s/blog_4c1f21000100utyx.html GO是Gene Ontology的简称,是生物学家为了衡量基因的功能而而发起的一个项目,从分子 ...

  8. css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版

    1.html: <!DOCTYPE html><html><head lang="en">    <meta charset=" ...

  9. 处理div 在IE6 IE7 IE8 下不居中的问题

    具体处理方式如下:1 .html 顶部加入:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  10. BNU Online Judge-34973-Liserious战队

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34973 题目不难,很容易,不过不仔细看题可能你一直做不出,注意<<一共分为1~ ...