1.如何居中一个浮动元素？

方法一：已知元素的高度

 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

         /* 方法一：已知元素的高宽*/

    #div1{

        background-color:#6699FF;

        width:200px;

        height:200px;

        position: absolute;      /*  父元素需要相对定位,子元素绝对定位 */

        top: 50%;

        left: 50%;

        margin-top:-100px ;   /* 二分之一的height，width */

        margin-left: -100px;

        }

    </style>

</head>

<body>

    <div id="div1"></div>

</body>

</html>
 

方法二：

 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>居中2</title>

    <style>

        #div1{

            width: 200px;

            height: 200px;

            background-color: #6699FF;

            margin:auto;

            position: absolute;  /*  父元素需要相对定位,子元素绝对定位 */

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

        }

    </style>

</head>

<body>

    <div id="div1"></div>

</body>

</html>
 

这些方法也是在网上看网友的经验,以后可能用的着

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素在父元素里面垂直居中</title>
<link rel="stylesheet" type="text/css" href=""/>
<style>
#d1{
border:thin solid red;
width:900px;
height:100px;
display:table-cell;
vertical-align:middle;

}
#d2{/*dashed也是虚线*/
border:thin dotted blue;
width:50px;
height:50px;
float:right;  
}
</style>  
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>  
</html>

浮动元素既垂直又水平居中的方法

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素在父元素里面垂直居中</title>
<link rel="stylesheet" type="text/css" href=""/>
<style>
#d1{
border:thin solid red;
width:900px;
height:100px;
display:table-cell;
vertical-align:middle;
margin:0 auto;
}
#d2{/*dashed也是虚线*/
border:thin dotted blue;
width:50px;
height:50px;
float:right;  
}
/* 浮动元素水平居中
二种方法 1、父级div设置固定宽度后
加margin:0 auto; 然后子级div加浮动，
即可实现；不过此方法不能无限伸展； 
2、在table内插入div，div设置浮动，
在table上设置margin:0 auto; 而table不
要设置宽度，因为table默认是宽度最小化的，实现居中的
*/
#d3{/*让浮动元素水平居中的方法1*/
width:50px;
margin:0 auto;
}
table{/*让浮动元素水平居中的方法2*/
margin:0 auto;
}
</style>  
</head>
<body>
<div id="d1">
<!-- <div id="d3"><div id="d2"></div></div> -->
<table>
<tr>
<td><div id="d2"></div></td>
</tr>
</table>
</div>
</body>  
</html>

二种方法 1、父级div设置固定宽度后

加margin:0 auto; 然后子级div加浮动，

即可实现；不过次方法不能无限伸展； 

2、在table内插入div，div设置浮动，

在table上设置margin:0 auto; 而table不

要设置宽度，因为table默认是宽度最小化的，实现居中的

2.如何居中一个<img>?

     /* <img>的容器设置如下 */

        #container{

            display:table-cell;

            text-align:center;

            vertical-align:middle;

        }

如何垂直居中元素（浮动元素&居中一个<img>）？的更多相关文章

  1. 如何居中div？如何居中一个浮动元素？

    如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...

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

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

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

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

  4. 好程序员分享居中一个float元素

    好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果.对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin: ...

  5. sub,dl,dt,排版,横向滚动条,浮动元素居中，box-sizing

    1.sub标签 下标 2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容.在使用时候我们能简洁html代码情况下,学会灵活使用dl ...

  6. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  8. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  9. css让浮动元素水平居中

    对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...

随机推荐

  1. Chrome 本地通信

    http://blog.csdn.net/ztmaster/article/details/52684772

  2. sql 批量更新表中多字段为不同的值

    ,),,),rand()) select newid() ,) update tablename , FB,)) , ), FC,)) , )

  3. 培训补坑（day7:线段树的区间修改与运用）（day6是测试，测试题解以后补坑QAQ）

    补坑咯~ 今天围绕的是一个神奇的数据结构:线段树.(感觉叫做区间树也挺科学的.) 线段树,顾名思义就是用来查找一段区间内的最大值,最小值,区间和等等元素. 那么这个线段树有什么优势呢? 比如我们要多次 ...

  4. vs附加到进程报MSVSMON.EXE未在远程计算机启动错误

    拿到同事电脑发现居然附加不上本地进程,网上那些关防火墙更改目标平台之类的方法都没用.最后发现是后台运行着一个叫 ss_privoxy.exe  的代理软件搞的,禁用所有非系统服务重启后删掉以绝后患.

  5. 聊聊C++模板函数与非模板函数的重载

    前言 函数重载在C++中是一个很重要的特性.之所以有了它才有了操作符重载.iostream.函数子.函数适配器.智能指针等非常有用的东西. 平常在实际的应用中多半要么是模板函数与模板函数重载,或者是非 ...

  6. docker run 的背后的故事（zz）

    当利用docker run来创建并启动容器的时候,docker后台标准的操作包括: 1.检查本地是否存在指定的镜像,不存在就从公有仓库下载. 当我依瓢画葫芦的运行: sudo docker run - ...

  7. 《锋利的jQuery》读书要点笔记7——制作商城网页：网站脚本

    第8章 用jQuery打造个性网站 上一节将网页的样式设计完了,现在开始用jQuery来编写网站的脚本.首先要确定的是应该完成哪些功能. 首页应该完成的功能是: 详情页: 这个页面要完成的效果是: 接 ...

  8. <context-param>与<init-param>的区别与作用（转自青春乐园）(

    <context-param>的作用:web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件we ...

  9. C#MD5加密和DES加密解密算法

    public partial class stringTest : System.Web.UI.Page     {         protected void Page_Load(object s ...

  10. [ubuntu] service apache2 restart [fail]

    $ /etc/init.d/apache2 restart * Restarting web server apache2 [fail] 解决办法4步走: 1. sudo /etc/init.d/ap ...