在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. C# Lock锁(个人随记)

    先看看为什么要用锁 需求:多线程处理值的加减   static int NoLockData = 0; public static void NoLockNormalTest(int threadIn ...

  2. MPU6050学习笔记（电源管理器1、2）

    Technorati Tags: 嵌入式开发.模块开发 寄存器107号:电源管理器1 PWR_MGMT_1: Description: This register allows the user to ...

  3. IBM主机家族——大型机、中型机、小型机

    对于x86架构的开放品台机器来说,IBM的封闭平台系列可以说是另一个“体系世界”. IBM z series    大型机, z/os操作系统 IBM i series/AS400   中型机,  i ...

  4. Day 46 视图、存储过程、触发器、函数、事物、锁

    一 .存储过程 create view stu_view as select * from ren 视图:是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据 视图有如下 ...

  5. Java基础学习篇---------static

    一.static的使用 1.使用static定义的属性往往通过类名直接调用,它的属性(方法)不属于某一个的对象的.所以对象没有创建之前就可以对static的属性的调用,方法亦如此. 2.static ...

  6. Sbulime Text 2 修改选中字符串的颜色

    Sublime Text 2 > Preferences > Browse Packages... 假设当前试用的 Color Scheme 是 Monokai,则在 Color Sche ...

  7. POJ 1126

    #include <stdio.h> #include <string> #include <iostream> using namespace std; int ...

  8. JavaScript 常见使用误区

    JavaScript 常见使用误区,都是平时开发过程中填过的一些坑,整理记录下. 比较运算符常见错误 //在常规的==比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = ...

  9. 【kafka】kafka.admin.AdminOperationException: replication factor: 1 larger than available brokers: 0

    https://blog.csdn.net/bigtree_3721/article/details/78442912 I am trying to create topics in Kafka by ...

  10. (转)Db2数据库一次生产故障详细记录---数据库坏页

    原文:http://www.talkwithtrend.com/Article/216335 前言 数据库最严重的故障莫过于数据库损坏.数据库坏页是数据库损坏的一种,如果数据库中有数据页出现损坏,在没 ...