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 ...
最新文章
- 估价范围还没有生产式的物料帐薄
- linux校园网电脑开wifi密码,Linux/Ubuntu 16.04 使用校园网客户端Dr.com DrClient 有线连网,同时开启WiFi热点...
- MySQL 特殊参数
- 9个不为人知的Python技巧
- Java HashSet的实现原理详解
- 1._请写出5种以上的android中界面常用布局方式,跳槽季“充电宝”Android面试题(一)...
- 浅入浅出——我的perforce客户端教程之二(或:p4v使用教程)
- android 三星 oom,android - 终结者抛出未捕获的异常:谷歌API错误或三星内核错误? - 堆栈内存溢出...
- ADO.NET 如何读取 Excel (下)
- Matplotlib从入门到精通
- 高效使用电脑,Fence和Direct Folder
- java—数据库连接池看这篇就够了
- Unity游戏开发团队包括哪些角色?
- 鸿蒙天钟壁纸,鸿蒙2.0桌面小工具时钟,日历显示不出来
- 友盟分享长图片,如何截取长图片去分享
- 华为交换机关闭网口_华为交换机关闭端口号
- 深圳中学因招聘上热搜:名校博士挤破头想进,教学成绩也确实不服不行
- 主引导记录(MBR)的反汇编分析
- 某计算机机房的上机控制电路,2012年南京市單招计算机专业教学调研测试卷一1.doc...
- java实现.费诺编码_使用递归算法编写的费诺编码