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. 【BZOJ2330】【SCOI2011】糖果 [差分约束]

    2330: [SCOI2011]糖果 Time Limit: 10 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description 幼儿园 ...

  2. POJ2154 Color

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10322   Accepted: 3360 Description Bead ...

  3. 51nod 1020 逆序排列——dp

    在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 如2 4 3 1中,2 1,4 3,4 1,3 1是逆序 ...

  4. [bzoj1030][JSOI2007]文本生成器——AC自动机

    Brief Description 给定一些模式串,您需要求出满足以下要求的字符串的个数. 长度为m 包含任意一个模式串 Algorithm Design 以下内容来自神犇博客 首先运用补集转换,转而 ...

  5. 线程局部存储 TLS

    C/C++运行库提供了TLS(线程局部存储),在多线程还未产生时,可以将数据与正在执行的线程关联.strtok()函数就是一个很好的例子.与它一起的还有strtok_s(),_tcstok_s()等等 ...

  6. scrapy的CrawlSpider使用

    1.创建项目 我这里的项目名称为scrapyuniversal,然后我创建在D盘根目录.创建方法如下 打开cmd,切换到d盘根目录.然后输入以下命令: scrapy startproject scra ...

  7. 阿里云OSS Web端直传 服务器签名C#版

    最近用到队里OSS的文件上传,然后阿里官方给的四个服务器签名有Java PHP Python Go四个版本,就是没C#(话说写个C#有多难?) 百度了一下好像也没有,既然这样只能自己动手照着Java版 ...

  8. [ Openstack ] OpenStack-Mitaka 高可用之 概述

    目录 Openstack-Mitaka 高可用之 概述    Openstack-Mitaka 高可用之 环境初始化    Openstack-Mitaka 高可用之 Mariadb-Galera集群 ...

  9. 【 APACHE 】 Apache2.4.x版本虚拟主机配置

    今天准备使用apache搭建一个目录浏览的服务,折腾了一下. apache2.4.x以后的版本: Require all granted 代替了apache2.4.x以前版本: Order Allow ...

  10. Combo Box的简单使用（Win32）

    1 SendMessage函数向窗口发送消息 LRESULT SendMessage( HWND hWnd,     // handle to destination window UINT Msg, ...