在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. CefSharp禁止弹出新窗体，在同一窗口打开链接，并且支持带type="POST" target="_blank"的链接

    1.实现ILifeSpanHandler接口,代码如下: using CefSharp; using CefSharp.WinForms; using System; using System.Col ...

  2. Restframework 权限permission 组件实例-2

    1.在视图类里添加权限组件 class BookView(APIView): authentication_classes = [UserAuth] permission_classes = [SVI ...

  3. Day 5 字典的操作

    1. 例子 ,务必理解 dic = { 'name':'金鑫', 'name_list':[1,2,3,'李杰'], 1:{ 'python10':['小黑','萌哥'], '老男孩':{'name' ...

  4. Weekly Contest 132

    1025. Divisor Game Alice and Bob take turns playing a game, with Alice starting first. Initially, th ...

  5. 873. Length of Longest Fibonacci Subsequence

    A sequence X_1, X_2, ..., X_n is fibonacci-like if: n >= 3 X_i + X_{i+1} = X_{i+2} for all i + 2 ...

  6. for循环、for in整理

    for循环 作用:按照一定的规律,重复去做某件事情,此时我们就需要使用循环来处理了 例子1:倒着输出每一项 <script type="text/javascript"> ...

  7. httprunner 使用总结

    HttpRunner 概念 HttpRunner 是一款面向 HTTP(S) 协议的通用测试框架,只需编写维护一份 YAML/JSON 脚本,即可实现自动化测试.性能测试.线上监控.持续集成等多种测试 ...

  8. MySQL(分组、连表操作、备份数据库)

    day58 分组 参考:https://www.cnblogs.com/xp796/p/5262187.html select dept, max(salary) from department gr ...

  9. AndroidManifest.xml文件安全探索

    本文作者:i春秋签约作家——icq8756c1a2 最近在做一些apk的安全检测,对AndroidManifest.xml文件进行了研究和探讨,介绍AndroidManifest.xml文件的作用和架 ...

  10. Jmeter之Bean shell使用

    转载地址:http://www.cnblogs.com/puresoul/p/4915350.html 一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且 ...