DIV+CSS解决文字与图片居中问题

关于网页中使得文字或者图片居中的方法还是比较实用的，本文和大家重点讨论一下DIV+CSS文字与图片上下垂直居中问题，相信本文介绍一定会让你有所收获。

专注于为中小企业提供做网站、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业鼓楼免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

DIV+CSS文字与图片上下垂直居中

未设置文字和图片在同排同行时候上下垂直居中时，CSS实例图片如下:

说明：

以上“www.divcss5.com”为divcss5网网址图片，后面跟着是文字段，可见虽然图片与文字在同行，但是文字未上下垂直居中，明显图片垂直居上，文字垂直居下。

◆DIV+CSS实例代码如下：

 
 
 
 
      
  
  
  
  1.   
  
  
  
  2.  
    3.   
  
  
  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. DIV+CSS实例讲解测试 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. body{font-size:12px;}  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.   
  
  
  
  15.  
    16.   
  
  
  
  16. alt="我是高度为37的DIVCSS5图片"/>DIVCSS5测试文字CSS  
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.  
    20.

说明首先我们设置此网页body内文字css样式为12px。然后在html引入图片(扩展：CSS引入-CSS引用)及在图片后跟几个测试文字。你可以拷贝以上代码新建成html网页，再到浏览器中浏览此新建的网页，结果将如上图。

设置css使文字和图片同排同行时候上下垂直居中

我们只需要在CSS样式，加入CSS代码如下：

 
 
 
 
      
  
  
  
  1. img{vertical-align:middle;}  
    2.   
  
  
  
  2.  
    3.

加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。

◆完整DIV+CSS代码如下：

 
 
 
 
      
  
  
  
  1.   
  
  
  
  2.  
    3.   
  
  
  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. CSS实例讲解测试 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. body{font-size:12px;}  
    10.   
  
  
  
  10. img{vertical-align:middle;}  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.   
  
  
  
  16.  
    17.   
  
  
  
  17. alt="我是高度为37的DIVCSS5图片"/>DIVCSS5测试文字  
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.  
    21.

 此网页在浏览器中浏览样式图：

我们可以观察上图或自己轻松亲自动手拷贝以上完整css代码和html源代码(源代码)即可实现和掌握css上下垂直居中技巧。

DIV+CSS延伸与提高

假如我们设置".yangshi"的高度和line-height，要想此DIV中内容垂直居中同样我们设置vertical-align:middle即可，CSS代码如下：
.yangshiimg{vertical-align:middle;}
这里值得说明的是高度和line-height一定要大于图片高度，否则也会出现“CSSHACK”在不同浏览器中不兼容情况。

CSS总结：

1、单独文字垂直居中我们只需要设置CSS样式line-height属性即可。

2、文字与图片同排，在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性，如.yangshi img{vertical-align:middle;} 。

【编辑推荐】

  1. DIV CSS隐藏内容样式方法详解
  2. IE6.0对padding的解读分析
  3. 揭露CSS中margins折叠现象内幕
  4. 七大CSS选择符用法说明
  5. 技术分享 如何使用CSS控制超链接文字样式

当前名称：DIV+CSS解决文字与图片居中问题
链接地址：http://www.gawzjz.com/qtweb2/news48/3298.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信小程序知识

各行业网站

定制网站建设　　 　四川瑞杰　　 　服务器托管　　 　成都网站安全运维　　 　广汉长尔科技　　 　免备案虚拟主机　　 　遂宁网站建设　　 　成都网站推广　　 　成都网站推广　　 　香港云主机　　 　成都网站建设　　 　云服务器　　 　LED亮化工程　　 　成都企业网站改版　　 　成都服务器租赁　　 　广安搬家公司　　 　成都做网站　　 　企业网站设计　　 　h5页面制作　　 　崇州做网站