1.单行文字: 设置height = line-height;

2. 多行文字: 设置 padding, 自己要计算一下?

3. vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 align属性的 table.

所以, 要使div中的内容垂直居中, 可以让div 模拟 表格的 属性就好了:

需要设置的css有两个:
  • 一个是: 外部的 div#wrap{ display: table; } 这个外部的包裹 容器要设置为 : display: table, 模拟一个表格;
  • 因此, 第二个就是 真实的, 要垂直居中的内容了: div#content{display: table-cell;} 这个就是模拟表格中的单元格了!!

参考文章:http://zhidao.baidu.com/link?url=x9lkdTVmQ7nbs_7jse7ZhEohjVNQgc3-CRTX51WS_eCubYUWCCP1udOwwyt5SPJ62YfkTfsq7qzSrX0f00p7K_

多行文本固定高度的居中 

///垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字

在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

======================================= =============

meta有两种类型的属性, 一种是name, 另一种属性是: http-equiv

  • name=...., content=....;
  • 另一种属性是: http-equiv=..., content=...

    其中, http-equiv是规定文件的内容类型, 所以: http-equiv="Content-Type" 它的值就相应的是: content="text/html; charset=utf-8"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

此 content-type <meta> 标记包括 http-equiv 和 content 属性。包含 content-type 值的 http-equiv 属性将此 <meta> 标记声明为 content-type <meta> 标记。该 content 属性的 text/html 值将此文档定义为基于文本的文件,文件在浏览器中应显示为 HTML。content 属性的 charset 值声明字符编码,它告诉浏览器如何显示文件中的字符。在上面的示例中,charset 值是 UTF-8。

万维网联合会 (W3C) 建议以 HTML 格式显示的 HTML 和 XHTML 文件包括一个 content-type <meta> 标记。

div+css使多行文字垂直居中?的更多相关文章

  1. 纯CSS实现多行文字垂直居中几种方法解析

    场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...

  2. css 单行/多行文字垂直居中问题

    例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...

  3. css布局-多行文字垂直居中

    方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...

  4. 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. 使用css属性line-height实现文字垂直居中的问题

    使用css属性line-height实现文字垂直居中的问题 1.使用css属性line-height实现文字垂直居中 方法比较简单,但是只能实现单行文字的垂直居中. 单行垂直居中效果如下:   要是p ...

  6. CSS实现多行文字限制显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  7. css实现多行文字限制显示&编译失效解决方案

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  8. CSS实现可变行数垂直居中

    <html> <head> <style> .vcenter { position: relative; height: 100%; width:50px; } . ...

  9. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

随机推荐

  1. 【BZOJ-1218】激光炸弹 前缀和 + 枚举

    1218: [HNOI2003]激光炸弹 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1778  Solved: 833[Submit][Statu ...

  2. eclipse各版本代号

    从2006年起,Eclipse基金会每年都会安排同步发布(simultaneous release).同步发布主要在6月进行,并且会在接下来的9月及2月释放出SR1及SR2版本.如下图所示的版本历史: ...

  3. asp.net MVC中获取当前URL/Controller/Action

    一.获取URL(ASP.NET通用): [1]获取完整url(协议名+域名+虚拟目录名+文件名+参数) string url=Request.Url.ToString(); [2]获取虚拟目录名+页面 ...

  4. ELF Executable Reconstruction From A Core Image

    catalog . INTRODUCTION . THE PROCESS IMAGE . THE CORE IMAGE . EXECUTABLE RECONSTRUCTION . FAILURES I ...

  5. Circular Queue Implementation Principle

    目录 . 引言 . 环形队列的实现原理 . 环形队列编程实现 . 环形队列的内核实现 1. 引言 环形队列是在实际编程极为有用的数据结构,它有如下特点 . 它是一个首尾相连的FIFO(First In ...

  6. 数据结构算法C语言实现(十)--- 3.3栈与递归的实现

    一.简介 汉诺塔问题是递归的一个典型例子,而且书上的讲解很详细,对理解C语言函数及函数传参的工作机制很有帮助,值得一看.而且,递归在我看来和分治.DP.贪心等一样是十分优美的思想,值得学习!!! 二. ...

  7. python实现自动输入命令回车操作

    苦逼的在sf上等了一天(问题链接),都没人来解答,只好自己想办法,东平西凑还是勉强实现了,记录一下: 安装完python2.7后,在cmd命令行输入python回车,后出现python相关的提示信息, ...

  8. RBD和AOF持久化对比

    RDB和AOF持久化对比 Redis提供了RDB持久化和AOF持久化,本篇文章中将会对这两种机制进行一些对比 RDB机制的优势和略施 RDB持久化是指在指定的时间间隔内将内存中的数据集快照写入磁盘. ...

  9. jQuery—DOM操作

    摘抄自<锋利的jQuery> 一.查找节点 1.查找元素节点 var li_txt = $li.text(); 2.查找属性节点 var p_txt = $para.attr(" ...

  10. Python3导入cookielib失败

    Python 3 改成 http.cookiejar了,所以只要改成import http.cookiejar就自动导入cookiejar了,如果还是不行,就把所有的.pyc删掉试试.