【css】一行或者多行文字垂直水平居中
1.方法一：使用css3弹性盒子（兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#main {
display: flex;
display:-webkit-flex;
flex-direction:column;/*纵向排列*/
} #main div {
width: 40px;
height: 40px;
display: flex;
display:-webkit-flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
-webkit-align-items:center;
}
/*或者
#main div {
width: 40px;
height: 40px;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center
}
*/
</style>
</head>
<body> <div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div> </body>
</html>
效果：
2.使用display:table-cell（不确定高度的容器中垂直居中）
display:table-cell;
vertical-align:middle;
text-align:center;
兼容性：IE8及以上浏览器，chrome,firefox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兼容ie8及以上浏览器</title>
<style type="text/css">
.box{
width:300px;
height:300px;
border:1px solid red;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.align-center-vertical{
} </style>
</head>
<body>
<div class="box">
<div class="align-center-vertical">
3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问</div>
</div>
</body>
</html>
效果：
3.利用vertical-align属性特性
ps:W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兼容ie8及以上浏览器</title>
<style type="text/css">
.box {
border: 1px dashed #cccccc;
height: 300px;
width:500px;
font-size:;
}
.box p, .box i {
display: inline-block;
vertical-align: middle;
overflow: hidden;
*display:inline;
*zoom:1;
}
.box i {
height: 100%;
width:;
}
.box p {
font-size: 14px;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<p class="text">多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居</p>
<i></i>
</div>
</body>
</html>
效果：
作者：smile.轉角
QQ：493177502
【css】一行或者多行文字垂直水平居中的更多相关文章
- css 一行或多行文字溢出以...的形式隐藏
一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...
- div中单行文字垂直水平居中
1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...
- 经典CSS坑：如何完美实现垂直水平居中？
经典CSS坑:如何完美实现垂直水平居中? 踩了各种坑之后总结出的方法,开门见山,直接上代码和效果图.希望对读者有所帮助,后续如果有更好的方法,我也会持续更新 第一种方法:transform(个人认为最 ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
- css如何设置首行文字缩进？
在HTML网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来 ...
- CSS样式—— 字体、元素的垂直水平居中
1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...
- css实现弹出窗体始终垂直水平居中
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name ...
- 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content
如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...
随机推荐
- 客户端和服务端（C#） 时间戳的生成和转换
C# DateTime与时间戳的相互转换,包括JavaScript时间戳和Unix的时间戳. 1. 什么是时间戳 首先要清楚JavaScript与Unix的时间戳的区别: JavaScript时间戳: ...
- javascript 字符串转换数字的方法大总结
方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有 ...
- 浅论各种调试接口（SWD、JTAG、Jlink、Ulink、STlink）的区别
JTAG协议 JTAG(Joint Test Action Group,联合测试行动小组)是一种国际标准测试协议(IEEE 1149.1兼容),主要用于芯片内部测试.现在多数的高级器件都支持JTAG协 ...
- cordova build android Command failed with exit code EACCES
问题: 执行cordova build android 出现输出如下,编译不成功. ANDROID_HOME=/Users/huangenai/Library/Android/sdkJAVA_HOME ...
- .NET Core微服务之基于Ocelot实现API网关服务
Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.啥是API网关? API 网关一般放到微服务的最前端,并且要让API 网关变成由应用所发起的每个请求的入口.这样就可以明显的简化客户端 ...
- Self Host 使用 Exceptionless 实时监控程序运行日志服务
Exceptionless 是一个可以对 ASP.NET Core, ASP.NET MVC,WebAPI, WebForms, WPF, Console 应用提供系统的日志,错误监控.报表等服务实时 ...
- 【Android Studio安装部署系列】四、Android SDK目录和作用分析
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android SDk Tool软件开发工具包(software development kit).被软件开发工程师用于为特定的软件 ...
- springboot~读取自定义配置项
我们springboot项目有自己默认的配置文件,一般地由application.yml和bootstrap.yml组成,前者是模块的配置,后者是微服务的配置,后台比前者先被框架加载. 我们有时需要自 ...
- 从零开始搭建一个规范的vue-cli 3.0项目
在这一集我们将讲到如何从安装vue-cli开始,到新建一个本地项目,再到vscode中关于eslint的配置,以及本地项目关联公司远程项目的基本操作. 一,初始化本地项目 1,首先,全局安装vue-c ...
- 浅析HttpSession
苏格拉底曰:我唯一知道的,就是自己一无所知 源头 最近在翻阅Springboot Security板块中的会话管理器过滤器SessionManagementFilter源码的时候,发现其会对单用户的多 ...