div中让文字垂直居中
问题引入
在div中如何让文字垂直居中?
作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来。
情景再现
为了方便展示,我把style先直接写在了div里。
<div style="width: 1200px;height: 60px;background-color: #952328;margin-bottom: 20px;border-radius: 20px;font-size: 25px;color: #cb9a34;text-align: center;/* line-height: 60px; */"><p>寺院巡礼</p></div>
效果如下图所示:
图1.修改前效果图
可以看到,“寺院巡礼”的标题并没有达到垂直居中的效果。
解决方法
简单的解决方法就是让div的 height
和 line-height
两个属性的值相等。
由之前的代码可知此div的高为60px,因此,在原style中添加 line-height: 60px;
样式,即可。
添加代码,修改后的效果如下图所示:
图2.修改后效果图
相关文章
《在Bootstrap4中使用垂直居中》>>点击阅读
作者:戴翔
电子邮箱:daixiangcn@outlook.com
div中让文字垂直居中相关推荐
- div中内容文字垂直居中、文字不换行显示省略号
目录 div中文字垂直居中 2.文字不换行,文本溢出显示省略标志 div中文字垂直居中 1.行高法 文字的行高和容器的高度相同, p { height:30px; line-height:30px; ...
- html怎么让div中的文字垂直居中,如何让DIV中的文字垂直居中?
在写页面时经常会碰到文字在div中要居中的情况.水平居中很容易,text-align:center就能实现:但垂直居中很少用到,要么就是直接给margin,但现在讲解一下不用margin如何实现垂直居 ...
- 在div中设置文字与内部div垂直居中
要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html><head lang="zh"><meta ht ...
- 实现全屏轮播,并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <htmllang="en"> &l ...
- 学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法 一.行高(line-height)法 二.内边距(padding)法 三.模拟表格法 四.CSS3的transform来实现 五:css3的box方法实 ...
- 在可编辑div中插入文字或图片的问题解决思路
最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片.因为web在线编辑器我从来只是用,基本不会去研究源代码.后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码. 基 ...
- 在div中插入文字和改变背景色
如下图,通过点击按钮,在div盒子中插入文字,并背景色 1.可以使用div中的innerText属性在div中插入文本内容,style.backgroudColor属性设置背景色. 2.完整 ...
- 如何将div中的内容垂直居中
如何将div中的内容垂直居中 第一种方法: 在div里面添加:text-align:center; line-height: 60px; 这里的line-height是行高,这个根据你的div的高度要 ...
- CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
最新文章
- Java - HtmlEmail 邮件发送
- 越来越多的人不刷朋友圈竟然是因为.....
- Spring AOP切入点与通知XML类型
- 使用Flash彻底美化你的程序
- Windows Mobile 开发系列文章收藏 - Windows Mobile 6.x
- Linux内核与Linux操作系统的区别,[科普] Linux 的内核与 Linux 系统之间的关系
- UVALive 2659+HUST 1017+ZOJ 3209+FZU 1686 (DLX
- 视觉SLAM十四讲学习笔记——第五讲--相机与图像
- Characteristics with cached values must be read-only
- Python scapy网络包嗅探模块(转载)
- android10解决NetworkInfo废弃替代NetworkInfo isConnected()问题
- 心形图案爱心代码编程c语言
- 集体智慧编程_6文档过滤
- LM3478 LTspice仿真模型
- 007 定位明文封包call
- Revit二次开发--为管道添加标注
- JAVA300集——面向对象编程-类和对象-构造方法及其重载-方法调用
- vue3+vite2多页面多路由 注意
- Accept和Content-type的意思
- IAMP方式下载邮件记录