css居中方法小结
水平居中
行内元素
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 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居中方法小结的更多相关文章
- CSS居中方法
css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...
- css中居中方法小结
---恢复内容开始--- 1.文字垂直居中 .header_nav-item{ height:38px; line-height:38px; } 即文字所在模块的高度和行高设置成一样的! 2.块元素垂 ...
- CSS 居中方法集锦
记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...
- CSS 居中方法集锦(*******************************)
记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align1.2 margin1.3 line-height1.4 pa ...
- CSS居中方法搜集
转自这里:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ 兼容低版本IE的方法 html使用表格结构 背景 ...
- css居中方法与双飞翼布局
居中 类型 方法 对应属性 水平 垂直 水平&垂直 1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的 ...
- css居中方法详解
水平居中: 通过设置父元素,让子元素内容居中:text-align:center; 通过设置子元素本身,让子元素居中:margin:0 auto; 以上方法生效的前提条件是子元素没有被float元素影 ...
- css 居中方法
垂直居中 利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的. .ghost-center { po ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
随机推荐
- Python学习笔记第十周
目录: 一.基础概念 1.多进程 2.进程间通信 3.进程锁 4.进程池 5.协程 a) greenlet b) Gevent 6.论事件驱动与异步IO 7.IO多路复用 8.Python Selec ...
- C#动态创建Xml-LinQ方式
C#创建Xml-LinQ方式 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...
- iOS常用的代码块整理
strong @property (nonatomic,strong) <#Class#> *<#object#>; weak @property (nonatomic,wea ...
- border重叠的问题
可以在css中添加border:0:去掉其中的一条border
- lesson4-图像分类-小象cv
CNN网络进化:AlexNet->VGG->GoogleNet->ResNet,深度8->19->22->152GoogleNet:Lsplit->trans ...
- 实验吧—密码学——WP之 困在栅栏里的凯撒
首先我们研究题目.栅栏:凯撒 还发现一个数字“6”,那么我们很容易就有一个解题思路 对这段字符进行栅栏解密再进行凯撒解密 我们都知道,栅栏解密的关键就是栏数,根据题目中我们发现的信息,这段字符串是12 ...
- 【带权并查集】【HDOJ】
http://acm.hdu.edu.cn/showproblem.php?pid=3047 Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others) ...
- c++期末考
1. 谁不及格? Problem:A Time Limit:1000ms Memory Limit:65535K Description 聪聪的班主任王老师最近有点忙,可是他又是一位非常细心的老师,每 ...
- python------模块定义、导入、优化 ------time模块
1.模块介绍 2.time & datetime 3.random 4.os 5.sys 6.shutil 7.json & pickle 8.shelve 9.xml处理 10.ya ...
- linux(Centos7)服务器硬件改动,进入Emergency模式
例如移走了某块硬盘后,直接开机就会进入该模式 这是因为/etc/fstab没有正确执行的原因 解决方法: 1)在该模式下输入root密码进入单用户模式(我没试过,不知道行不行,如果不行的话就用忘记ro ...