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之路,第七篇:Python入门与基础7
python3 元组 (tuple) 元组是不可改变的序列, 同list 一样, 元组可以存放任意的值: 表示方法: 用小括号()括起来: 单个元素括起来后加逗号(,)区分单个对象还是元组: 创建空 ...
- i = i ++;的分解
步骤分解: package wrong; public class ShortTest { public static void main(String args[]) { /* * i = i ++ ...
- 实验吧—隐写术——WP之 我喜欢培根
打开解题链接: 有一点点基础的同学大概都知道这是摩尔斯电码,那么我们对他进行解密: 解密后得到: MORSEnullISnullCOOLnullBUTnullBACONnullISnullCOOLER ...
- Linux命令对应英文全称
https://blog.csdn.net/yrc_note/article/details/72598780 拓展:https://blog.csdn.net/u010613363/article/ ...
- myBatis框架的配置部分
第一步:导包. 第二步:配置部分(第一部分) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...
- 【vue】遇到的问题
[一]项目编译的时候报错 npm install npm WARN @mtfe/thrift@2.3.7 requires a peer of thrift@0.11.0 but none is in ...
- linqpad使用方法备忘
1.使用EF更新数据库 void Main() { select item).ToList(); CM_BookPages.DeleteAllOnSubmit(items); SubmitChange ...
- oracle使用一条语句批量插入多条数据
例如我有一个test表 create table (stuid int,name varchar(20); 插入多条数据,注意不能直接使用insert into test values(1,'a'), ...
- 系统限制和选项limit(一)
从shell中获取系统限制和选项 终端输入getconf value [pathname] [root@bogon code]# getconf ARG_MAX 2097152 [root@bogon ...
- airflow-operator 可以管理airflow 的kuberntes 自定义controller && crd
使用airflow-operator 我们可以让airflow 可以很方便的运行在k8s集群环境中,当前还在开发中 主要分为两部分:airflowbbase && airfowclus ...