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. 【Foreign】冒泡排序 [暴力]

    冒泡排序 Time Limit: 10 Sec  Memory Limit: 256 MB Description Input Output 仅一行一个整数表示答案. Sample Input 4 5 ...

  2. [bzoj3306]树——树上倍增+dfs序+线段树

    Brief Description 您需要写一种数据结构,支持: 更改一个点的点权 求一个子树的最小点权 换根 Algorithm Design 我们先忽略第三个要求. 看到要求子树的最小点权,我们想 ...

  3. 在shell脚本中添加暂停，按任意键继续

    分析一个复杂脚本的时候,有时候需要加点暂停,分段来看,比较清晰 于是参考了一些实现,目前自己用的是这样子的 #add for debug by zqb function get_char() { SA ...

  4. Linux ALSA介绍

    1. 介绍 ALSA(即Advanced Linux Sound Architecture), 是目前Linux的主流音频体系结构, 提供了音频和MIDI的支持, 其架构图如下所示 TIP: 笔者的代 ...

  5. vbs登陆网站

    Option Explicit Dim objIE Set objIE = CreateObject("InternetExplorer.Application") objIE.V ...

  6. 使用 .NET Core 的日志记录

    如何使用 Microsoft.Extensions.Logging   public static void Main(string[] args = null) {  ILoggerFactory ...

  7. Python Standard Library

    Python Standard Library "We'd like to pretend that 'Fredrik' is a role, but even hundreds of vo ...

  8. python模拟鼠标和键盘操作

    import win32api import win32con import win32gui from ctypes import * import time VK_CODE = { 'backsp ...

  9. node中通过orm2链接mysql的一个坑

    代码是orm上的例子,出现如下错误: ORMError: Connection protocol not supported - have you installed the database dri ...

  10. opencv mat

    mat基础教程: http://blog.csdn.net/sinat_31802439/article/details/50083291 mat 初始化: Mat M(,,CV_32FC1); Ma ...