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. USACO_1.1_Your_Ride_Is_Here_(字符串+水题)

    描述 http://train.usaco.org/usacoprob2?a=y0SKxY0Kc2q&S=ride 给出两个由大写字母组成,长度不大于$6$的字符串. 将字符串中的各字母的字典 ...

  2. [BZOJ1391]解题报告|网络流的又一类建图&Dinic的若干优化

    1391: [Ceoi2008]order 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可以通过购买或租用机器来完成. 现在给出这些参数, ...

  3. 【BZOJ】1691: [Usaco2007 Dec]挑剔的美食家

    [算法]扫描线+平衡树(set) [题解]很明显的二维偏序数点,排序后扫描线,现加点后查询答案. 则问题转化为一维偏序,显然贪心找第一个比当前大的最优,所以用平衡树维护. 记得开multiset!!! ...

  4. [bzoj1486][HNOI2009]最小圈——分数规划+spfa+负环

    题目 传送门 题解 这个题是一个经典的分数规划问题. 把题目形式化地表示,就是 \[Minimize\ \lambda = \frac{\sum W_{i, i+1}}{k}\] 整理一下,就是 \[ ...

  5. 【MT8382/8121】使用绝对路径编译模块会导致recourse_overlay无法应用的问题

    之前为了方便mm模块编译,写了个脚本,实现了在任意模块其子目录下执行脚本即可编译的功能. 其实原理就是一层一层目录地往上寻找Android.mk文件,找到存放Android.mk目录后,就把该目录当作 ...

  6. StringUtils.isEmpty()和StringUtils.isBlank() 区别

    isBlank()判断空的情况包括了isEmpty()的情况,isBlank()不仅判断了 无对象.空对象的情况,而且也判断了无意义的空白字符,比如空格等.

  7. 【 学习笔记 】memcached基础知识

    源地址:http://kb.cnblogs.com/page/42731/ 仔细学习了下,以下是记录的笔记备忘内容. 一.memcached是什么?    memcached是高性能的分布式内存缓存服 ...

  8. 简单unix 局域网的TCP会话

    client.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <e ...

  9. window下golang包管理glide使用说明

    golang是一门简洁高效的开发 语言,但是包管理一直是一个痛点,如图 : 很多开源项目特别是github.com中的大量应用golang.org和google.golang.org中的源码,且由于被 ...

  10. Django 静态文件配置 （Nginx）

    初学Django,在访问静态文件时候遇到很多误区,一直配置不成功,在此记录一下. Django静态文件访问分为两种:一种是Debug模式下,测试开发网站时对静态文件的访问,一种是实际生产环境中对静态文 ...