水平居中

行内元素

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 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学习笔记第十四周

    目录: 一.HTML 1.概述 2.HTML 二.CSS 一.HTML 1.概述 HTML是英文Hyper Text Mark-up Lang(超文本标记语言)的缩写,他是一种制作万维网页面的标准语言 ...

  2. arm svc

    隐藏exit,ptrace etc. C示例 #include <sys/ptrace.h> #include <stdio.h> int main() { int r; as ...

  3. epoll_wait惊群问题

    项目接入层用的模型是,主线程创建listenfd,传入6个子线程,每个子线程一个事件循环,epoll_wait这个listenfd. 如果是listenfd,则epoll_wait返回调用accept ...

  4. mac上不了网

    不知怎么回事勾选了socks代理导致ping的通但打不开网页软件登不了

  5. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  6. Cloth

    https://www.youtube.com/watch?v=2zd1AI198I8Blender Tutorial For Beginners: Cloth Napkin 建模, 1透明玻璃杯, ...

  7. wireshark显示过滤器的几种用法(转自他人博客)

    本文章转自:http://blog.51cto.com/houm01/1872652 几种条件操作符 ==   eq    等于    ip.addr == 192.168.0.1   ip.addr ...

  8. 【状压DP】【HDOJ1074】

    http://acm.hdu.edu.cn/showproblem.php?pid=1074 Doing Homework Time Limit: 2000/1000 MS (Java/Others) ...

  9. emacs安装

    1.我选用的是Ubuntu16.04. 2.Ubuntu安装好之后不能直接sudo apt-get install emacs,因为Ubuntu的源默认是emacs24,最好是用最新的emacs25, ...

  10. AangularJS相关术语

    1.   数据模型对象(model object)是指$scope对象.$scope对象又是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互. 2.  $scope ...