vertical-align垂直居中
<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垂直居中的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- inline-block的垂直居中
inline-block和inline都是不需要浮动就可以成行的,但是他们成行的效果不同. inline和浮动中的block是顶着上边,inline-block是像被一根绳子从垂直方向的中心穿过去. ...
- CSS垂直居中完美有用实例
<!DOCTYPE HTML> <html> <head> <meta meta chars ...
- Objective-c——UI基础开发第十天(自动布局)
一.autoresizing 的使用(了解) 只能参照父控件 1.实现横竖屏幕切换,不能把控件的frame血丝,需要进行屏幕适配 2.需要参照父控件 use auto layout禁用 才会出现aut ...
- 对CSS居中的一点总结
在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到.居中的技巧有很多,但在编写代码的过程中,发现有时候技巧管用,有时候不管用,于是就将每个知道的方案都 ...
- CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
随机推荐
- 使用Android Studio搭建Android开发环境
一.Android Studio简单介绍 2013年GoogleI/O大会首次发布了Android Studio IDE(Android平台集成开发环境).它基于Intellij IDEA开发环境,旨 ...
- PHP Primary script unknown 终极解决方法
相信很多配置php环境的都遇到过这个恼人的问题: 浏览器访问php文件,返回来 File not found 查看/var/log/nginx/error.log ,有 “Primary script ...
- Jmeter性能测试 入门--转载
转载: Jmeter性能测试 入门 Jmeter是一款优秀的开源测试工具, 是每个资深测试工程师,必须掌握的测试工具,熟练使用Jmeter能大大提高工作效率. 熟练使用Jmeter后, 能用Jmete ...
- python递归锁与信号量
递归锁 一把大锁在加一把小锁. import threading import time def run1(): print("grab the first part data") ...
- python 动态导入模块、断言
断言: 类似与判断,后面的程序依赖前面的,可以加一个断言,断言成功继续执行.断言失败报错停止执行. a = 'abc' assert type(a) is str print('yes') asser ...
- matlab练习程序(多线段交点)
很简单的算法,这里是把每对线段都进行比较了. 还有一种似乎先通过x和y排序再进行交点判断的,不过那种方法我还没看太明白. 这里的方法如下: 1.根据线段的端点求两条直线的交点. 2.判断直线的交点是否 ...
- 玩得一手好注入之order by排序篇
看了之前Gr36_前辈在先知上的议题,其中有提到排序注入,这个在最近经常遇到这样的问题,所以先总结下order by 排序注入的知识. 0×00 背景 看了之前Gr36_前辈在先知上的议题,其中有提到 ...
- python 学习 (迟到的2017小结)
2017过去了,从前端开发转测试,入行一年多,写了web的UI自动化测试框架,看了python基础教程,核心编程,算是入门python了吧.目前呢,想开发个接口的自动化测试平台. ...
- C/C++中构造函数和析构函数能否被继承
http://bbs.csdn.net/topics/390160673 标准方面做了要求的.Even though destructors are not inherited 构造函数和析构函数是不 ...
- Android(java)学习笔记45:深入分析Java ClassLoader原理
1. 前言: Android中的动态加载机制能更好的优化我们的应用,同时实现动态的更新,这就便于我们管理我们的应用,通过插件化来减轻我们的内存以及CPU消耗,在不发布新版本的情况下能更新某些模块. 当 ...