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. CentOs7安装JDK/Tomcat/Git/Gradle

    安装Jdk: wget http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/j ...

  2. 51nod 1060 最复杂的数

    把一个数的约数个数定义为该数的复杂程度,给出一个n,求1-n中复杂程度最高的那个数.   例如:12的约数为:1 2 3 4 6 12,共6个数,所以12的复杂程度是6.如果有多个数复杂度相等,输出最 ...

  3. Logistic函数

    Logistic函数(又称sigmoid函数)        Logistic函数或Logistic曲线是一种常见的S形函数,它是皮埃尔·弗朗索瓦·韦吕勒在1844或1845年在研究它与人口增长的关系 ...

  4. python函数篇：名称空间、作用域和函数的嵌套

    一.名称空间:(有3类) (1)内置名称空间(全局作用域) (2)全局名称空间(全局作用域) (3)局部名称空间(局部作用域) 关于名称空间的查询: x=1 def func(): print('fr ...

  5. HTTP===通用首部字段的各种指令解释

    Cache-Control 通过指定首部字段 Cache-Control 的指令,就能操作缓存的工作机制. 指令的参数是可选的,多个指令之间通过“,”分隔.首部字段 Cache-Control 的指令 ...

  6. tarjan算法和Kosaraju算法

    tarjan算法和Kosaraju算法是求有向图的强连通分量的算法: #include<iostream> #include<cstring> using namespace ...

  7. 同源、同源策略、跨域问题、django解决方案

    什么是同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 注意:假如你的网站ip是123.123.123.123,网站的域名是www.abc.com. ...

  8. Sikuli 安装使用之初体验（为Sikuli X指定jre路径）

    Sikuli 是一种新颖的图形脚本语言,在实际的自动化测试中如果仅仅依靠selenium 还是远远不够的,selenium自动化本身是存在着诸多缺陷的,基于浏览器之外的控件 (windows 控件 等 ...

  9. MATLAB作图方法与技巧(一)

    下面从折线图.曲面图和图形说明与定制三个方面说明MATLAB作图的一些方法与技巧,注意,文中出现的单引号在MATLAB中实际运行的时候,需要改为MATLAB认可的单引号. 一. 作折线图 1.plot ...

  10. sybase ase 重启

    sybase ase 重启 https://blog.csdn.net/davidmeng10/article/details/50344305 https://blog.csdn.net/wengy ...