新航路师徒学院

 找回密码
 立即注册
搜索
查看: 346|回复: 1

【新航路】DIV+CSS文字垂直居中

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-26 11:26:22 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="renderer" content="webkit"/>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  7.     <title>北京新航路科技有限公司 - www.xhanglu.com</title>
  8.         <style>
  9.         html{height:100%;}
  10.         body{margin:0;height:100%;}
  11.         div{height:100%; text-align:center;border:1px solid red;}
  12.         span{display:inline-block; height:100%; vertical-align:middle;border:1px solid red;}
  13.         img{ vertical-align:middle;}
  14.         </style>
  15. </head>
  16. <body>
  17. <div>
  18.     <span></span><img src="http://img.xhanglu.com/app/w/home/i/logo.png" alt="1"/>文字居中
  19. </div>
  20. </body>
  21. </html>
复制代码
回复

使用道具 举报

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
 楼主| 发表于 2016-8-26 11:26:54 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="renderer" content="webkit"/>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  7.     <title>北京新航路科技有限公司 - www.xhanglu.com</title>
  8. <style type="text/css">
  9. .l_llq {width:600px;height:320px;line-height:320px;border: 1px solid;text-align: center;}
  10. .l_llq img {vertical-align: middle;}
  11. .l_llq span {_height:100%;_writing-mode:tb-rl;_vertical-align:middle;}
  12. /** .l_llq span {_height: 100%;_layout-flow:vertical-ideographic;_vertical-align:middle;} **/

  13. </style>
  14. </head>
  15. <body>
  16. <div class="l_llq">
  17.         <span><img src="http://img.xhanglu.com/app/w/home/i/logo.png" alt="北京新航路科技有限公司" /></span>
  18. </div>
  19. <hr />
  20. <div class="l_llq">
  21.         <span><img src="http://img.xhanglu.com/app/w/home/i/logo.png" alt="北京新航路科技有限公司" /></span>
  22. </div>
  23. <hr />
  24. <div class="l_llq">
  25.         <span><img src="http://img.xhanglu.com/app/w/home/i/logo.png" alt="北京新航路科技有限公司" /></span>
  26. </div>
  27. </body>
  28. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-9-18 23:25 , Processed in 0.127056 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表