WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>DIV CSS HTML>>如何实现DIV内的文字垂直居中

如何实现DIV内的文字垂直居中

[ 录入者:91ctc | 时间:2012-04-25 12:54:00 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

我们知道要让一个<td>中的内容垂直居中对齐,是很简单的事情,我们借助DW,可以快速让DW生成如下代码:

XML/HTML Code复制内容到剪贴板
  1. <table width="281" height="137" border="0" align="center" cellpadding="0" cellspacing="0">  
  2.   <tr>  
  3.     <td align="center" valign="middle">测试</td>  
  4.     <td align="center" valign="middle">测试</td>  
  5.   </tr>  
  6.   <tr>  
  7.     <td align="center" valign="middle">测试</td>  
  8.     <td align="center" valign="middle">测试</td>  
  9.   </tr>  
  10. </table>  

上述代码对于网页设计师来说一点都不陌生,align="center"实现了<td>内的元素水平居中,valign="middle"实现了<td>内的元素垂直居中。但是我们使用DIV该如何实现上述效果呢?

先贴代码:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>DIV内的文字垂直居中</title>  
  6. <style type="text/css">  
  7. .c { margin:0px auto;}   
  8. .box { width:200px; height:100px; border:1px #0066FF solid; text-align:center; vertical-align:middle;}   
  9. -->  
  10. </style>  
  11. </head>  
  12.   
  13. <body>  
  14. <div class="box c">DIV内的文字垂直居中</div>  
  15. </body>  
  16. </html>  

虽然CSS当中也有 text-align:center属性可以实现DIV文本内的元素水平居中,vertical-align:middle是实现DIV内文本垂直居中,但是,我们会发现上述代码运行后,并不能达到我们期望的效果。我们运行后,发现:

如何实现DIV内的文字垂直居中

没有实现垂直居中!其实我们只要给.box 增加一个属性:line-height:100px;(行高和DIV的高度一致)即可。截图说明一下:

如何实现DIV内的文字垂直居中

这是在DW设计器视图中看到的可视化效果,其中DIV内黑色的部分是文字的行高,通过指定行高,我们实现了DIV内文字的垂直居中。如图:

如何实现DIV内的文字垂直居中

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号