在div中如何让文字垂直居中？

作者在刚接触web前端开发时就遇到了这个问题，一直没有记录下来，今天正好有空，便记录下来。

为了方便展示，我把style先直接写在了div里。

效果如下图所示：


图1.修改前效果图

可以看到，“寺院巡礼”的标题并没有达到垂直居中的效果。

简单的解决方法就是让div的 和 两个属性的值相等。

由之前的代码可知此div的高为60px，因此，在原style中添加 样式，即可。

添加代码，修改后的效果如下图所示：


图2.修改后效果图

div中让文字垂直居中的更多相关文章

  1. 如何让DIV中的文字垂直居中

    var h = $("div").innerHeight(); $("#text").css("font-size", h); $(&quo ...

  2. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  3. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  4. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  5. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  6. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  7. div中的img垂直居中的方法，最简单！ 偷学来的，，，不要说我抄袭啊(*^__^*)

    让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell;   让标签具有表格的属 ...

  8. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  9. css之div中纯文字单行和多行垂直居中

    先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

随机推荐

  1. Spring Batch学习笔记(一)

    Spring Batch简介 Spring Batch提供了可重复使用的功能,用来处理大量数据.包括记录.跟踪,事务管理,作业处理统计,作业重启,跳过和资源管理. 此外还提供了更高级的技术服务和功能, ...

  2. Sql语句在SqlServer中创建数据库、表格并添加约束

    通过Sql语句来创建数据库与架构 创建数据库 数据库的创建首先是要引用主数据库的,需要在master数据库的环境下进行创建.大致的语法如下: -- 使用master数据库 use master -- ...

  3. EF 多对多循环引用序列化失败 解决办法

    错误:Self referencing loop detected with type 'System.Data.Entity.DynamicProxies.tbldph_901D48A194FB31 ...

  4. MySQL中需要注意的几点

    几个常用的命令: select  database(); #查看当前所在的数据库. select  user();#查看当前登录的用户 show global variables like " ...

  5. 1.在html中引入js文件和Jquery框架

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. chrome浏览器本地文件支持ajax请求的解决方法

    .右键chrome的快捷键--->点击属性 .在快捷方式的选项卡的目标里末尾填上如下内容: --allow-file-access-from-files 要关闭所有的chrome打开的网页

  7. Flask从入门到精通之Flash消息

    请求完成后,有时需要让用户知道状态发生了变化.这里可以使用确认消息.警告或者错误提醒.一个典型例子是,用户提交了有一项错误的登录表单后,服务器发回的响应重新渲染了登录表单,并在表单上面显示一个消息,提 ...

  8. fail2ban

    在 [DEFAULT] 全局配置中的ignoreip选项中添加被放行的ip地址:ignoreip = 127.0.0.1 172.17.1.218 网段可以加 127.0.0.1/8,用空格隔开就行. ...

  9. Spring MVC+MySQL保存中文变成乱码

    环境:MySQL,Spring MVC3.2.0,jQuery v2.0.3,使用JdbcTemplate访问数据库,相当于全套Spring解决方案. 现象 直接使用表单POST,或者使用jQuery ...

  10. 纯css实现不固定行数的文本在一个容器内垂直居中

    项目中要实现的效果如图: html代码 及 css代码: <!DOCTYPE html> <html> <head> <meta charset=" ...