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 一.文字选择的 ...
随机推荐
- 浅谈python web框架中的orm设计
看了一下廖雪峰的那个web框架,其实就是封装了web.py,请求使用异步并将aiomysql做为MySQL数据库提供了异步IO的驱动,前端部分则整合了jinja.其中最难的应该是orm部分了. 下面是 ...
- 04传智_jbpm与OA项目_部门模块改进_直接在BaseAction中实现ModelDriven<T>
这个项目是用Struts2做的,我这里单独写了一个BaseAction,用来存放所有的功能模块的Action的公共部分, 刚开始的做法是这个BaseAction只会继承ActionSupport 并不 ...
- DEDECMS之八 漏洞错误和疑难杂症
1.dedecms文章加粗b属性后出现strong或者b标签修改 dedecms的文章,如果设置了加粗的属性后,文章标题那会自动添加一个strong或者是b标签,如何去掉呢,方法如下: a.更改自动添 ...
- Stream 和 byte[]
C# Stream 和 byte[] 之间的转换 一. 二进制转换成图片MemoryStream ms = new MemoryStream(bytes);ms.Position = 0;Imag ...
- list使用例子(转)
例子: 在vs2010中创建一个winform的解决方案,然后定义一个类Person,Person.cs 的代码如下: using System;using System.Collections.Ge ...
- 本地的html怎么直接通过路径就读取本地文件。
我要做的事情是已知一个目录的相对路径,获得这个路径下面所有的txt文件,然后读到一个JS Script里面做下一步处理. 网上的例子都是使用input的,既然我是local的html文件,也知道路径了 ...
- ajax请求过程中下载文件在火狐下的兼容问题
项目中碰到的问题,记录如下. 需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片p ...
- C/C++代码覆盖工具gcov与lcov入门
C/C++代码覆盖工具gcov与lcov入门 gcov是一个可用于C/C++的代码覆盖工具,是gcc的内建工具.下面介绍一下如何利用gcov来收集代码覆盖信息.想要用gcov收集代码覆盖信息,需要在g ...
- C 语言学习的第 02 课:C 语言的开发环境
工欲善其事,必先利其器.不知道还是不是记得上一篇文章中说到的,计算机本身是一个数据输入及输出的设备.所以,为了将你大脑中的各种 idea 输入到电脑,且最终生成能够执行的程序,总是要预备点什么的. 通 ...
- rhel7修改网卡命名规则
1步:当安装完红帽RHEL7系统安装完成,您的网卡命名是这样的. 第2步:请编辑网卡的配置文件 将”/etc/sysconfig/network-scripts/ifcfg-eno16777736“的 ...