<div id="content">
<div id="weizi">
锄禾日当午,<br>
汗滴禾下土。<br>
谁知盘中餐,<br>
粒粒皆辛苦。<br>
</div>
</div>
        #content{
width: 300px;
height: 300px;
border: #000 solid 1px;
margin: auto;
}
#weizi{
border: #000 solid 1px;
text-align: center;
vertical-align: middle;
}

单独写vertical-align: middle不会有垂直居中的效果

例:

        #con::before{
content: "";
width: 25px;
height: 25px;
background: url(camera.png) no-repeat;
background-size: 25px 25px;
display: inline-block;
vertical-align: middle;

margin: -1px 5px 5px 5px;
}
#con::after{
content: "";
width: 25px;
height: 25px;
background: url(search.png) no-repeat;
background-size: 25px 25px;
display: inline-block;
vertical-align: middle;
margin: -1px 5px 5px 5px;
}

这个之所以有效果因为vertical-align:middle;配合display: inline-block;使用。

我们发现只有表格的时候垂直居中是管用的,只需在子元素加一个display:table-cell;表格单元格显示,父元素加display:table;

        #content{
width: 300px;
height: 300px;
border: #000 solid 1px;
margin: auto;
display: table;
}
#weizi{
border: #000 solid 1px;
text-align: center;
vertical-align: middle;
display:table-cell;
}

vertical-align垂直居中的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  3. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  4. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  5. inline-block的垂直居中

    inline-block和inline都是不需要浮动就可以成行的,但是他们成行的效果不同. inline和浮动中的block是顶着上边,inline-block是像被一根绳子从垂直方向的中心穿过去. ...

  6. CSS垂直居中完美有用实例

    <!DOCTYPE HTML>           <html>            <head>             <meta meta chars ...

  7. Objective-c——UI基础开发第十天(自动布局)

    一.autoresizing 的使用(了解) 只能参照父控件 1.实现横竖屏幕切换,不能把控件的frame血丝,需要进行屏幕适配 2.需要参照父控件 use auto layout禁用 才会出现aut ...

  8. 对CSS居中的一点总结

    在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到.居中的技巧有很多,但在编写代码的过程中,发现有时候技巧管用,有时候不管用,于是就将每个知道的方案都 ...

  9. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  10. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 使用Android Studio搭建Android开发环境

    一.Android Studio简单介绍 2013年GoogleI/O大会首次发布了Android Studio IDE(Android平台集成开发环境).它基于Intellij IDEA开发环境,旨 ...

  2. PHP Primary script unknown 终极解决方法

    相信很多配置php环境的都遇到过这个恼人的问题: 浏览器访问php文件,返回来 File not found 查看/var/log/nginx/error.log ,有 “Primary script ...

  3. Jmeter性能测试 入门--转载

    转载: Jmeter性能测试 入门 Jmeter是一款优秀的开源测试工具, 是每个资深测试工程师,必须掌握的测试工具,熟练使用Jmeter能大大提高工作效率. 熟练使用Jmeter后, 能用Jmete ...

  4. python递归锁与信号量

    递归锁 一把大锁在加一把小锁. import threading import time def run1(): print("grab the first part data") ...

  5. python 动态导入模块、断言

    断言: 类似与判断,后面的程序依赖前面的,可以加一个断言,断言成功继续执行.断言失败报错停止执行. a = 'abc' assert type(a) is str print('yes') asser ...

  6. matlab练习程序(多线段交点)

    很简单的算法,这里是把每对线段都进行比较了. 还有一种似乎先通过x和y排序再进行交点判断的,不过那种方法我还没看太明白. 这里的方法如下: 1.根据线段的端点求两条直线的交点. 2.判断直线的交点是否 ...

  7. 玩得一手好注入之order by排序篇

    看了之前Gr36_前辈在先知上的议题,其中有提到排序注入,这个在最近经常遇到这样的问题,所以先总结下order by 排序注入的知识. 0×00 背景 看了之前Gr36_前辈在先知上的议题,其中有提到 ...

  8. python 学习 (迟到的2017小结)

    2017过去了,从前端开发转测试,入行一年多,写了web的UI自动化测试框架,看了python基础教程,核心编程,算是入门python了吧.目前呢,想开发个接口的自动化测试平台.           ...

  9. C/C++中构造函数和析构函数能否被继承

    http://bbs.csdn.net/topics/390160673 标准方面做了要求的.Even though destructors are not inherited 构造函数和析构函数是不 ...

  10. Android(java)学习笔记45:深入分析Java ClassLoader原理

    1. 前言: Android中的动态加载机制能更好的优化我们的应用,同时实现动态的更新,这就便于我们管理我们的应用,通过插件化来减轻我们的内存以及CPU消耗,在不发布新版本的情况下能更新某些模块. 当 ...