html文字垂直居中自动换行,css 如何使文字垂直居中
单行文本,只需要将文本行高(line-height)和所在区域高度(height)设为一致即可:
这是单行文本垂直居中
/*css代码*/
#div1{
width: 300px;
height: 100px;
margin: 50px auto;
border: 1px solid red;
line-height: 100px; /*设置line-height与父级元素的height相等*/
text-align: center; /*设置文本水平居中*/
overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
多行文本垂直居中分为两种情况,一个是父级元素高度不固定,随着内容变化;另一个是父级元素高度固定。
父级高度不固定的时,高度只能通过内部文本来撑开。这样,我们可以通过设置内填充(padding)的值来使文本看起来垂直居中,只需设置padding-top和padding-bottom的值相等:
这是多行文本垂直居中,
这是多行文本垂直居中,
这是多行文本垂直居中,
这是多行文本垂直居中。
/*css代码*/
#div1{
width: 300px;
margin: 50px auto;
border: 1px solid red;
text-align: center; /*设置文本水平居中*/
padding: 50px 20px;
}
父级高度固定的时,设置父级div的display属性:display: table;;然后再添加一个div包含文本内容,设置其display:table-cell;和vertical-align:middle
这是固定高度多行文本垂直居中,
这是固定高度多行文本垂直居中,
这是固定高度多行文本垂直居中,
这是固定高度多行文本垂直居中。
/*css代码*/
#outer{
width: 400px;
height: 200px;
margin: 50px auto;
border: 1px solid red;
display: table;
}
#middle{
display:table-cell;
vertical-align:middle;
text-align: center; /*设置文本水平居中*/
width:100%;
}
html文字垂直居中自动换行,css 如何使文字垂直居中相关推荐
- css滤镜使文字变3D效果
为什么80%的码农都做不了架构师?>>> 四夕刚从 OECP社区看到了一篇文章 <css滤镜使文字变3D效果>,Css的确很强大, W3C 公布了样式单( CSS ...
- html文本环绕’,css如何使文字环绕显示
css如何使文字环绕显示 css实现文字环绕可以使用float来实现,下面介绍下具体的实现方法. 1)代码部分 .img-left { border: 3px solid #005588; width ...
- html如何设置字体纵向居中,css 如何使文字垂直居中
单行文本,只需要将文本行高(line-height)和所在区域高度(height)设为一致即可: 这是单行文本垂直居中 /*css代码*/ #div1{ width: 300px; height: 1 ...
- HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果?(代码示例)
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
- html中文本旋转90度,css如何使文字方向转90度
css中可以使用transform属性使文字方向转90度,语法格式为"transform: rotate(90deg)".transform属性表示元素应用2D或3D转换,当值为r ...
- php字体闪烁,怎么纯用css代码使文字展示闪动效果?(代码示例)
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
- html怎样让文字自动换行,CSS怎么设置文字自动换行?
CSS怎么设置文字自动换行?下面本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)自动换行的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 关于换行问题,正常字符的换 ...
- html中div文字垂直居中显示,CSS文本和div垂直居中方法总结
在样式布局中,我们经常碰到需要将元素居中.通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和rig ...
- 前端——CSS如何使文字居中
最近在制作网页的时候,经常需要用到添加文本.但大部分文本都需要调整到需要的位置.调整文本的位置,可以通过margin来设置外边距的方法来调整.而使文本居中,则一般有以下三种方法. text-align ...
最新文章
- 15.4 xshell使用xftp传输文件;15.5 使用pure-ftpd搭建ftp服务
- remote_port java_Java HttpServletRequest.getRemotePort方法代碼示例
- php ci提交表单验证,ci表单验证代码
- 【深度学习】高效使用Pytorch的6个技巧:为你的训练Pipeline提供强大动力
- Taro+react开发(21)--注意参数格式
- 使用WebService与Oracle EBS进行集成(上)
- 生日祝福html_更新,礼包选择,头像框及太子生日金币活动
- Eventbus 使用方法和原理分析
- 广东工业大学通信原理复习笔记第七章数字信号的调制传输(思维导图)含链接和习题
- 施耐德 m340 编程手册_施耐德电气自动化软件汇总
- 看!Mac上好用的流程图软件就是它
- Java打印26个字母
- oracle汉字转换成拼音首字母和五笔首字母
- 计算机快捷键如何移动到桌面,如何设置显示桌面快捷键 设置显示桌面快捷键方法【图文】...
- 请求转发(request对象)和重定向(response)的区别及何时使用请求转发和重定向
- ACwing 895 - 最长上升子序列(最长上升子序列模型)
- java使用jsoup爬虫入门
- 外贸业务员该如何拓客?
- mvc模式网页购物车
- 维基百科:人人都能改写的网络百科全书
热门文章
- 怎样做到音频合并无缝衔接
- UDS服务基础篇之2F
- 全球及中国反渗透膜市场品牌竞争格局与应用前景调研报告2022年
- Pandas学习笔记(包括示例代码、运算结果及详细注释)
- Oracle 安装时执行setup时出现乱码报错以及Oracle 11 Windows x64版下载地址和教程链接
- R语言Logistic回归模型案例(绘制列线图、校正曲线):研究低出生体重婴儿的核心影像因素
- c# printdialog 打印html,c# – ReportViewer.PrintDialog()在打印到Adobe PDF时抛出异常
- windows下读取Linux分区软件
- java no arguments_java中的arguement是什么意思?
- JAVA 实现《大富翁》游戏|CSDN创作打卡