行内元素:

水平居中:text-align:center

ul水平居中:加
display:table;
margin:0 auto;
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

垂直居中:line-height:父元素的height

块元素:

水平居中:

①margin:0 auto

例:
.father{
width:200px;
height:200px;
background-color:red;
}
.son{
width:100px;
height:100px;
background-color:black;
margin:0 auto;
}

0指上下外边距为0,auto指左右外边距自适应,此时水平居中。(该方法不适用于垂直居中) 这种方法不适用于通屏,即若子元素溢出,则在父元素中不居中

②position:relative/absolute/fixed

relative:相对定位,保留初始位置(即不浮动)

特点:1.不影响元素本身特性
2.不使元素脱离文档流(不浮动)
3.可以不设定偏移量,此时位置不会发生变化
4.该元素是相对于自己本身位置的偏移量。

absolute:绝对定位,不保留初始位置

特点:1.元素完全脱离文档流(浮动)
2.使内联元素支持宽和高
3.让块标签内容撑开宽高
4.相对父元素偏移,且逐层查找,直到document,若父元素没有position:relative属性,则继续向上找,直到document,即相对于浏览器左上角。
5.提升层级,即盖在其他未用该属性的元素上,或者在他之前使用该属性的元素上。(优先级可以用z-index设置,值越大,优先级越高,但是若父元素,即使用position:relative的元素也被覆盖,则没有用)

fixed:相对于视窗定位,即不管滑轮向下还是向上拉,该元素位置始终不变。(IE6以下不兼容)

<style>
.test{
width:200px;
height:100px;
background-color:yellow;
}
.test1{
width:200px;
height:100px;
background-color:green;
position:relative;
left:50%;
margin-left:-100px; <!--子元素的height的一半-->
}
.test2{
width:200px;
height:100px;
background-color:blue;
}
.test3{
width:200px;
height:100px;
background-color:red;
}
</style>
</head> <body>
<div class="test">
</div>
<div class="test1">
</div>
<div class="test2">
</div>
<div class="test3">
</div>

(插不了图片。。。我口述吧。。) 就是保留了图片本来的的位置,而图片移动到了屏幕中央的位置。 若将上面test2的position改为absolute,则浮动,图片2本来的位置被test3覆盖 用上面position,left,margin-left三个属性也可以使div水平居中(垂直居中将left改为top即可) 这种方法适用于通屏,即若子元素溢出,则在父元素中也居中。

优点:不用知道父元素的width

垂直居中:

①设置父元素的padding

缺点:需要知道父元素的width值

②上述水平方法第二个,将left改为top

③绝对居中(即水平,垂直都居中)

实现方法:父元素相对定位,子元素绝对定位,在子元素中添加属性

{
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
}

该方法不浮动,但也存在不通屏的问题。

div和css:行内元素和块元素的水平和垂直居中的更多相关文章

  1. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  2. IE6 行内定义成块元素后高度失效

    问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...

  3. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  4. 从文档流来看内联元素和块元素的css排版

    veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

  5. html——行内元素、块元素、行内块元素

    行内元素:span  ,a,  ,strong , em,  del,  ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...

  6. 第48天学习打卡(HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 )

    行内元素和块元素 块元素 ​ 无论内容多少,该元素独占一行 ​ (p.h1-h6) 行内元素 ​ 内容撑开宽度,左右都是行内元素的可以排在一行 ​ (a.strong.em...) 列表 什么是列表 ...

  7. HTML中为何P标签内不可包含块元素?

    起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...

  8. html中内联元素和块元素的区别、用法以及联系

    昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...

  9. !important覆写css行内样式

    <div class="block"> <span style="font-weight: bold; color: red;">Hel ...

随机推荐

  1. 之前的大数相加存在bug,这个ac通过了

    #include <iostream> #include <string> /*project:两个大整数相加 **@author:浅滩 **data:2019.05.15 * ...

  2. XML文件基础,DTD校验文件编写,Schema文件的简单使用

    dtd <!-- <!ELEMENT 元素(子元素,...)> --> <!ELEMENT students (student+,cat*) > <!ELEM ...

  3. 搭建appium环境

    1.下载jdk1.8  配置环境变量 JAVA_HOME---------->你的jdk路径 path---------------------->%JAVA_HOME%\bin;%JAV ...

  4. 织梦DEDECMS系统中文章内容为空 用SQL语句如何删除?

    织梦后台里提供了清空内容为空的文章,可是发现并不好用,有些空文章还是删除不了,而有些文章不是空的,只是采到了几个字,这些无法清除,于是就手动来清除这个文章.开始是一个一个文章找,一个一个来删除,后来觉 ...

  5. luogu P1630 求和(枚举暴力)

    题意 题解 可以发现当a=10001时, 和1是等价的. 所以这题就水了. #include<iostream> #include<cstring> #include<c ...

  6. Manacher 求最长回文子串算法

    Manacher算法,是由一个叫Manacher的人在1975年发明的,可以在$O(n)$的时间复杂度里求出一个字符串中的最长回文子串. 例如这两个回文串“level”.“noon”,Manacher ...

  7. 紫书 习题8-4 UVa 11491 (贪心)

    题意:给你一个数, 要求删去一些数字, 使得剩下的数字最大. 这道题用贪心解决. 大家想一想, 两个数比较大小, 肯定先比较第一位的数,然后依次比较第二位,以此类推. 既然我们要保证最后的数字最大, ...

  8. gRPC全局异常捕获

    gRPC全局异常捕获 引 一般的.net项目比如ASP.NET.控制台程序.Windows服务.桌面程序等都会有framework自带的全局异常捕获机制.ASP.NET的ExceptionFilter ...

  9. tomcatserver管理界面username和password忘记

    tomcatserverhttp://localhost:8080/ 这样訪问,点击Manager App后要求输入username和password才干进入管理应用界面 我忘记了username和p ...

  10. 8.最佳的MongoDB客户端管理工具

    转自:https://blog.csdn.net/chszs/article/details/51348248