代码实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
    .mytest
    {
        width:200px;
        height:200px;
        border:1px solid red;
        margin:0px auto;
    }
</style>
</head>
<body>
    <div class="mytest">我将要浮动</div>
</body>

</html>

给对象添加margin:0px auto即可实现此效果。

如何让div水平居中的更多相关文章

  1. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  2. div水平居中

    1.先给它外层的div定位并left:position:absolute;left:50%; 2.获取当前元素div的宽度,并除以2 3.改变它的css:margin-left:-(获取当前元素div ...

  3. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  4. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  5. 第三章Div水平居中

    1.div居中 text-align:center可以让元素里面的文字内容居中,但并不能让div居中.要让div水平居中必须设置div宽度,外边距设置为margin:0 auto <%@ Pag ...

  6. css+div水平居中

    实现div内容水平居中 实现方案一:margin:0 auto; div{ height:100px; width:100px; background:red; margin:0 auto; } &l ...

  7. 大div中,三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. div水平居中和垂直居中

    水平居中和垂直居中 水平居中包含两种情况:        块级元素的水平居中:margin:0px auto;        文字内容的水平居中:text-align: center;        ...

  9. [转]CSS网页布局:div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  10. div 水平居中

    对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto;

随机推荐

  1. dir:一行代码,提取出所有视频文件名称及路径

    某次,部门接到一个任务,要求对公司现有的视频文件资料做一个统计整理分类的工作. 领导召集开会,问:两周时间够用吗? 统计整理分类工作的第一步骤是把视频文件名称来源类别信息录入到 excel 表格中,才 ...

  2. KindEditor ---富编辑器

    关于 演示 下载 文档 成功案例 English 文档 Documentation  http://kindeditor.net/doc3.php 当前位置: 首页  > 文档 文档 Docum ...

  3. google-perftools 分析JAVA 堆外内存

    google-perftools 分析JAVA 堆外内存 分类: j2se2011-08-25 21:48 3358人阅读 评论(4) 收藏 举报 javahbasehtml工具os 原文转自:htt ...

  4. asp.net之ajax

    ajax主要的作用是无刷新的情况进行提交. 常用于客户端组件信息的提交.服务器组件在asp.net中能够正常的提交,而html组件则不能正常提交,在此情况下,就可以采用jquery的方式进行数据的异步 ...

  5. unity中的欧拉角

    unity中欧拉角用的是heading - pitch -bank系统(zxy惯性空间旋转系统):当认为旋转顺序是zxy时,是相对于惯性坐标系旋转.当认为旋转顺序是yxz时,是相对于物体坐标系旋转. ...

  6. Jquery使用ajax以及angularjs 动态模板加载并进行渲染

    1. 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  7. 数据接口管理工具 thx RAP

    RAP是数据接口管理工具.在开发时前端将请求转至RAP,由RAP提供模拟数据:而后端使用RAP测试接口的正确性.这样RAP就成为了开发过程中的强 依赖,进而确保接口文档的实时正确性.RAP采用JSON ...

  8. 彻底解决ASP.NET MVC 3 404错误码返回302的问题

    转自:http://blog.csdn.net/mycloudke/article/details/9746333 404状态码:,意味着当在页面上显示用户点击不存在,提高用户体验度,搜索引擎会放弃这 ...

  9. java 常用集合例子

    package test; import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; import ...

  10. PHPCMS-首页的二级导航、轮播效果

    导航栏:(header.html) <div id="menu"> <a href="{siteurl($siteid)}"><d ...