DIV+CSS中图片和文字居中怎么设置

这篇文章主要介绍“DIV+CSS中图片和文字居中怎么设置”，在日常操作中，相信很多人在DIV+CSS中图片和文字居中怎么设置问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”DIV+CSS中图片和文字居中怎么设置”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

10年积累的成都网站设计、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有武川免费网站建设让你可以放心的选择与我们合作。

DIV+CSS居中之图片与文字同排垂直居中

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

DIV+CSS中图片和文字居中怎么设置

说明：

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

DIV+CSS实例代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>DIV+CSS实例讲解测试</title> <styletypestyletype="text/css"> body{font-size:12px;}   </style> </head> <body> <imgsrcimgsrc="http://www.divcss5.com/images/divcss5.jpg"  alt="我是高度为37的DIVCSS5图片"/>DIVCSS5测试文字CSS  </body> </html>

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

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

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

img{vertical-align:middle;}

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

完整DIV+CSS代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>CSS实例讲解测试</title> <styletypestyletype="text/css"> body{font-size:12px;}  img{vertical-align:middle;}  </style>  </head> <body> <imgsrcimgsrc="http://www.divcss5.com/images/divcss5.jpg"  alt="我是高度为37的DIVCSS5图片"/>DIVCSS5测试文字  </body> </html>

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

DIV+CSS中图片和文字居中怎么设置

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

DIV+CSS延伸与提高

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

DIV+CSS总结：

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

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

到此，关于“DIV+CSS中图片和文字居中怎么设置”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

标题名称：DIV+CSS中图片和文字居中怎么设置
转载来于：https://www.cdcxhl.com/article40/jhcoho.html

成都网站建设公司_创新互联，为您提供面包屑导航、定制开发、网站营销、网站维护、定制网站、品牌网站建设

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

猜你还喜欢下面的内容