水平居中

行内元素

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 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. 【leetcode】70-ClimbingStairs

    problem ClimbingStairs 题意: 爬台阶问题,每次可以爬1个或者两个台阶,问如果有n个台阶,可以有多少种方法爬到顶部? 解析: 对于n=1,有一种方法:n=2,有两种方法: 对于n ...

  2. HDU - 2892:area (圆与多边形交 求面积)

    pro:飞行员去轰炸一个小岛,给出炸弹落地点的位置信息,以及轰炸半径:按顺时针或者逆时针给出小岛的边界点. 求被轰炸的小岛面积. sol:即是求圆和多边形的面积交. (只会套板子的我改头换面,先理解然 ...

  3. c++中的stl

    String Vector Set List Map 1.string char* s1 = "Hello SYSU!"; //创建指针指向字符串常量,这段字符串我们是不能修改的 ...

  4. Ubuntu下一个好用的终端

    在终端下输入: sudo apt-get install terminator 快捷键: shift+ctrl+e          在当前窗口右侧新开一个窗口 shift+ctrl+w        ...

  5. whmcs模板路径

    whmcs网站根目录 比如你的域名是server.nongbin.vip,你需要cd /home/wwwroot/server.nongbin.vip,该目录下然后,cd template/ 给文件夹 ...

  6. 用idea编写第一个jsp文件

    创建一个JAVA-web项目的前提:1.下载并安装JDK2.安装并配置Tomcat服务器 下面开始创建JAVA-web项目: 1.File——>new——>Project...   2.跟 ...

  7. LG2742 【模板】二维凸包 / [USACO5.1]圈奶牛Fencing the Cows

    题意 题目描述 农夫约翰想要建造一个围栏用来围住他的奶牛,可是他资金匮乏.他建造的围栏必须包括他的奶牛喜欢吃草的所有地点.对于给出的这些地点的坐标,计算最短的能够围住这些点的围栏的长度. 输入输出格式 ...

  8. combineReducers 对数据进行拆分管以及使用immutable.js

    1 使用combineReaducers 整合reducers import { combineReducers } from 'redux-immutable'; import { reducer ...

  9. Centos7提示swap交换空间不足解决方法

    一张图就能解决的问题,就不多bb了

  10. windows知识

    文章目录 系统 修改远程桌面的端口号 IE选项中reset web setting不可用(灰色)的解决办法 重装系统后,修改默认程序安装目录.我的文档.桌面 路径 Keep network addre ...