水平居中

行内元素

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

块状元素

当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

定宽块状元素:块状元素的宽度width为固定值

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素:块状元素的宽度width不固定。)

不定宽块状元素:块状元素的宽度width不固定

设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的。

通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

.container{
float:left;
position:relative;
left:50%
} .container ul{
list-style:none;
margin:;
padding:;
position:relative;
left:-50%;
} .container li{
float:left;
display:inline;
margin-right:8px;
}
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

垂直居中

父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

父元素高度确定的多行文本

给父元素设置line-height等于高度值,font-size设置为0,对多行文本添加一个div父元素,改元素设置display:inline-block;vertical-align:middle;并且重新设置font-size和line-height,因为这两个属性会继承父元素的值。

.out {
border:1px solid red;
line-height: 200px;
height:200px;
font-size:;
text-align: center;
}
.inner {
display: inline-block;
vertical-align: middle;
font-size:14px;
line-height: 20px;
}
<div class="out">
<div class="inner">
<p>111</p>
<p>222</p>
</div>
</div>

css3的flex布局,使得居中问题变得更简单了,随着对flex布局的熟悉和了解,后续会不断完善这一部分内容。

css居中方法小结的更多相关文章

  1. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

  2. css中居中方法小结

    ---恢复内容开始--- 1.文字垂直居中 .header_nav-item{ height:38px; line-height:38px; } 即文字所在模块的高度和行高设置成一样的! 2.块元素垂 ...

  3. CSS 居中方法集锦

    记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...

  4. CSS 居中方法集锦(*******************************)

      记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align1.2 margin1.3 line-height1.4 pa ...

  5. CSS居中方法搜集

    转自这里:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ 兼容低版本IE的方法 html使用表格结构 背景 ...

  6. css居中方法与双飞翼布局

    居中 类型 方法 对应属性 水平 垂直 水平&垂直 1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的 ...

  7. css居中方法详解

    水平居中: 通过设置父元素,让子元素内容居中:text-align:center; 通过设置子元素本身,让子元素居中:margin:0 auto; 以上方法生效的前提条件是子元素没有被float元素影 ...

  8. css 居中方法

    垂直居中 利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的. .ghost-center { po ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. Python学习笔记第十周

    目录: 一.基础概念 1.多进程 2.进程间通信 3.进程锁 4.进程池 5.协程 a) greenlet b) Gevent 6.论事件驱动与异步IO 7.IO多路复用 8.Python Selec ...

  2. C#动态创建Xml-LinQ方式

    C#创建Xml-LinQ方式 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  3. iOS常用的代码块整理

    strong @property (nonatomic,strong) <#Class#> *<#object#>; weak @property (nonatomic,wea ...

  4. border重叠的问题

    可以在css中添加border:0:去掉其中的一条border

  5. lesson4-图像分类-小象cv

    CNN网络进化:AlexNet->VGG->GoogleNet->ResNet,深度8->19->22->152GoogleNet:Lsplit->trans ...

  6. 实验吧—密码学——WP之 困在栅栏里的凯撒

    首先我们研究题目.栅栏:凯撒 还发现一个数字“6”,那么我们很容易就有一个解题思路 对这段字符进行栅栏解密再进行凯撒解密 我们都知道,栅栏解密的关键就是栏数,根据题目中我们发现的信息,这段字符串是12 ...

  7. 【带权并查集】【HDOJ】

    http://acm.hdu.edu.cn/showproblem.php?pid=3047 Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others)   ...

  8. c++期末考

    1. 谁不及格? Problem:A Time Limit:1000ms Memory Limit:65535K Description 聪聪的班主任王老师最近有点忙,可是他又是一位非常细心的老师,每 ...

  9. python------模块定义、导入、优化 ------time模块

    1.模块介绍 2.time & datetime 3.random 4.os 5.sys 6.shutil 7.json & pickle 8.shelve 9.xml处理 10.ya ...

  10. linux(Centos7)服务器硬件改动,进入Emergency模式

    例如移走了某块硬盘后,直接开机就会进入该模式 这是因为/etc/fstab没有正确执行的原因 解决方法: 1)在该模式下输入root密码进入单用户模式(我没试过,不知道行不行,如果不行的话就用忘记ro ...