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-文字和图片在容器内垂直居中实测。方法来源张鑫旭博客。
方法一:在文字或者图片后加入一个width为0的inline-block元素,将文字inline-block后vertical-align:middle.图片同理 多行文字居中:(有些浏览器会出问题, ...
- css文字环绕图片--遇到的问题及解决方法
一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...
- 【css】多行文字图片混排容器内垂直居中解决方案
css: .box-wrap{display:table;width:200px;height:200px;*position:relative;}/*最外边的容器,需固定宽高*/ .box-ha ...
- 纯css实现不固定行数的文本在一个容器内垂直居中
项目中要实现的效果如图: html代码 及 css代码: <!DOCTYPE html> <html> <head> <meta charset=" ...
- css实现文本块在容器中垂直居中
效果如图: css代码: .textContainer { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: ...
- CSS鼠标悬停图片加边框效果,不位移的方法
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...
- css插入背景图片底部有白边的解决方法
相信很多小伙伴遇到过用CSS插入背景图时,底部出现白边的情况,如下图: 个人总结了2个方法如下: 解决方法1:给图片都加上 vertical-align: middle属性.有时,移动端也会有类似 ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- HTML/CSS实现文字环绕图片布局
原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...
随机推荐
- poi 读取使用 Strict Open XML 保存的 excel 文档
poi 读取使用 Strict Open XML 保存的 excel 文档 某项目有一个功能需要读取 excel 报表内容,使用poi读取时报错: 具体错误为: org.apache.poi.POIX ...
- 设计模式《JAVA与模式》之调停者模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述调停者(Mediator)模式的: 调停者模式是对象的行为模式.调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显引用.从 ...
- iOS--各种bug详解
1.为什么传的参数都对,但是就是请求不下来数据. 答:检查下传的字符串中,是不是有多的空格. 例如: 错误:{"startIndex":"1","en ...
- tcpdump命令抓包参数
在 Linux 命令行中使用 tcpdump 抓包 通过实例学习tcpdump命令 聊聊 tcpdump 与 Wireshark 抓包分析 tcpdump常用参数 -n 显示IP地址和端口号 -v 显 ...
- go generate命令有啥作用呢?
go generate命令其实就是用来生成代码用的,一般情况下需要配置其他工具和库一起使用 go官网有个实例: painkiller.go package painkiller type Pill i ...
- Java DB 访问(三)mybatis mapper interface接口
1 项目说明 项目采用 maven 组织 ,依赖 mysql-connector-java,org.mybatis,junit pom 依赖如下: mysql 数据连接 : mysql-connect ...
- 浏览器内核、渲染引擎、JS引擎简介
一.定义 浏览器内核分成两部分:渲染引擎和JS引擎. 由于JS引擎越来越独立,浏览器内核 就倾向于 单指 渲染引擎. 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具.(说白了,就是按照 ...
- C++:复制构造函数
关于复制构造函数的具体细节:浅层复制和深层复制等可以看下 范磊老师的<零起点学通C++>视频教程和<C++ Primer Plus>一书. 相信看完后,对复制构造函数能基本掌握 ...
- Mac 下安装.NET Core 与 CLI
.NET Foundation:https://github.com/dotnet/home .NET Core:https://github.com/dotnet/coreclr CLI:https ...
- php获取全选checkbox多个值
<form name="myform" action="index2.php" method="post"> ...