CSS 文字垂直居中
原始 demo
html
<div class ="box"> <div class="text"> 我是单行测试文字 </div> </div> <div class="box"> <div class="text"> 我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字 </div> </div>
css
.box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;} .text{}
效果图:
一、单行文字的垂直居中
解决方案:line-height方法
css
.box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;line-height:100px;}
效果图
说明:可以看到,这种方法会使得单行文字居中,而多行文字因为被设置了与容器等大的 line-height,导致文字溢出。所以该方法只适合单行文字的居中。
二、多行文字的垂直居中
解决方案:vertical-align 方法
css
.box{ border:1px solid #f00; background-color:#eee; width:500px; height:100px;vertical-align:middle;display:table-cell;}
.text{}
效果图:
说明:可以看到,这种方法能够使得单行文字、多行文字都居中。但是因为 table-cell 是 inline 类型,所以会导致原来的块级元素每个 div 一行移动到了同一行。如果需要分列两行,需要在外面额外添加容器对位置进行控制。
相关阅读:
line-height、vertical-align与display:inline-block的一些问题
CSS 文字垂直居中的更多相关文章
- CSS文字垂直居中的一些问题
说到CSS文字垂直居中,很多初学者都喜欢用调整行高等于div高度的方式来达到效果, div { height:30px; line-height:30px; } 但其实这么做会遇到一个问题:多行文本溢 ...
- css 文字垂直居中问题
CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_log ...
- [HTML]DIV+CSS 文字垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css实现固定高度及未知高度文字垂直居中的完美解决方案
在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...
- css解决文字垂直居中
参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html http://zhidao.baidu.com/question ...
- css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
- css 图片文字垂直居中
先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
- DIV+CSS如何让文字垂直居中?(转)
此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...
随机推荐
- C语言末
最后一篇C语言的随笔啦,今天考试,感觉脑袋里一片空白,好像失忆了一样,但是不管怎么说,反正已经考完试了,成绩的好坏只能说明你以前的学习情况,不能预测你下一阶段的学习,不管考的怎么样,都已经过去了,考试 ...
- Ruby-随机数
--随机0-1 rand --随机一个范围 rand(1..100)
- js 小知识
在iframe 页面获取父级页面的 html var obj = window.parent.document.getElementById('modaliframe'); 解决Jquery 的在一个 ...
- nginx安装waf防护
一.安装nginx 二.安装luajit2.0 三.安装ngx_devel_kit#wget https://github.com/simpl/ngx_devel_kit/archive/v0.2.1 ...
- [bzoj1087][scoi2005]互不侵犯king
题目大意 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上 左下右上右下八个方向上附近的各一个格子,共8个格子. 思路 首先,搜索可以放弃,因为这是一 ...
- Tomcat常见问题汇总
1.在服务器上一定要开启-server参数 #直接在一堆注释下添加即可 #即是在 # OS specific support.注释之前 JAVA_OPTS= -server 2.tomcat启动很慢 ...
- (转)微信小程序破解IDE
1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...
- QDirModel
#include "dialog.h" #include "ui_dialog.h" #include<QInputDialog> Dialog:: ...
- 《Linux及安全》实践3.3
<Linux及安全>实践三 字符集总结与分析 [by lwr] 一.ISO.UCS/UTF.GB系列字符集分析 1.字符集&字符编码 字符集(Charset):是一个系统支持的所有 ...
- linux suse系统防火墙端口开放配置
1.切换到root用户下 2.进入到/etc/sysconfig/SuSEfirewall2 3.修改FW_SERVICES_EXT_TCP=" 22 80 8080 8081 8082 8 ...