zoukankan      html  css  js  c++  java
  • div+css使多行文字垂直居中?

    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> 标记。
    

  • 相关阅读:
    互动媒体学习社区-ASP.NET MVC 后台用户管理模块
    互动媒体学习社区-ASP.NET MVC 开发步骤
    互动媒体学习社区-ASP.NET MVC 数据库设计
    辗转相除法求最大公约数和最小公倍数分析
    C语言循环
    C语言中语句的跨行支持总结
    值得一学的C语言
    概率论
    Saul's Blog
    深入浅出 神经网络
  • 原文地址:https://www.cnblogs.com/bkylee/p/5888436.html
Copyright © 2011-2022 走看看