css-文字和图片在容器内垂直居中实测。方法来源张鑫旭博客。
方法一、使用line-heigh使多行文字居中或图片居中
把文字包裹在一个inline-block元素中vertical-align middle,外部元素line-heigh等于高度
<div class="box1">
<span>多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中</span>
</div>
.box1{
background-color: #ccc;
width: 300px;
height: 300px;
margin: 100px auto;
line-height: 300px;
}
.box1 span{
display: inline-block;
line-height: 20px;
vertical-align: middle;
}
图片居中:
<div class="box1">
<img src="common-header-logo.png">
</div>
.box1{
background-color: #ccc;
width: 300px;
height: 300px;
margin: 100px auto;
line-height: 300px;
text-align: center;
font-size: 0;
}
.box1 img{
vertical-align: middle;
}
效果:
方法二:使用flex布局实现居中(更简单,不支持IE9)
HTML如下:
<div class="box">
<span>span多行居中测试<br>span多行居中测试<br>span多行居中测试</span>
<p>p另一个段落元素</p>
</div>
CSS如下:
.box{
display: flex;
width: 500px;
height: 300px;
margin: 50px auto;
border: 2px solid #000;
align-items: center;/*副轴居中*/
}
.box span{/*span是另一个flex布局容器,它本身将自适应填满除p元素外的宽度*/
flex:;
display: flex;
justify-content: center;/*主轴居中*/
}
方法三:使用绝对定位使图片居中
见http://www.cnblogs.com/zczhangcui/p/6274660.html
css-文字和图片在容器内垂直居中实测。方法来源张鑫旭博客。的更多相关文章
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活
图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...
- [转] 小tip: 使用CSS将图片转换成黑白(灰色、置灰) ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: ...
- css文字环绕图片--遇到的问题及解决方法
一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...
- css-文字和图片在容器内垂直居中的简单方法
方法一.使用line-heigh使多行文字居中或图片居中 把文字包裹在一个inline-block元素中vertical-align middle,外部元素line-heigh等于高度 <div ...
- CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭
一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...
- [转] HTML5终极备忘大全(图片版+文字版)---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片 ...
- 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...
随机推荐
- js对象定义
JS中的对象定义方式,跟服务端,还是有很大差别的! 现在来说一下JS类的定义 工厂模式 function creatHeven(name,age){ var temp =new Object(); t ...
- NET WebApi OWIN 实现 OAuth 2.0
NET WebApi OWIN 实现 OAuth 2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和 ...
- QT UDP聊天小程序
利用QT的UDP技术,实现两个QT程序之间的聊天程序. #ifndef WIDGET_H #define WIDGET_H #include <QWidget> #include < ...
- nginx学习(1):编译、安装、启动
一.下载 从官网http://nginx.org/en/download.html 下载稳定版(目前最新稳定版是1.6.2) 二.解压 tar zxf nginx-1.6.2.tar.gzcd ngi ...
- 通向高可扩展性之路(WhatsApp篇)---- 脸书花了190亿买来的WhatsApp的架构
原文链接:http://highscalability.com/blog/2014/2/26/the-whatsapp-architecture-facebook-bought-for-19-bill ...
- rsync实现负载均衡集群文件同步,搭建线上测试部署环境
闲来无事,搭建一个负载均衡集群,至于负载均衡集群搭建过程,找时间写下.这次主要写集群之间的文件同步,以及线上测试环境的搭建. 笔者看过很多公司都没有线上测试环境,真是崩溃了,不造怎么确保线上线下环境一 ...
- PHP 页面跳转方法
1.php header()函数跳转 PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,这时页面跳转是302重定向: $url = ...
- C# 控制台程序实现 Ctrl + V 粘贴功能
代码主要分为两部分,首先调用系统API注册剪切板相关的事件,然后监控用户的按键操作.完整代码如下: class ClipBoard { [DllImport("user32.dll" ...
- Windows去除快捷箭头
美化桌面 bat代码: reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shel ...
- android 获取时间
首先,先说下java下可以正常使用的方法: import java.text.DateFormat; import java.text.SimpleDateFormat; import java.ut ...