怎么用DIV+CSS解决文字与图片居中问题
这篇文章主要讲解了“怎么用DIV+CSS解决文字与图片居中问题”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用DIV+CSS解决文字与图片居中问题”吧！
DIV+CSS文字与图片上下垂直居中
未设置文字和图片在同排同行时候上下垂直居中时，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> <imgclass="lazy" data-srcimgclass="lazy" data-src="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> <imgclass="lazy" data-srcimgclass="lazy" data-src="http://www.divcss5.com/images/divcss5.jpg" alt="我是高度为37的DIVCSS5图片"/>DIVCSS5测试文字 </body> </html>此网页在浏览器中浏览样式图：
我们可以观察上图或自己轻松亲自动手拷贝以上完整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;} 。
感谢各位的阅读，以上就是“怎么用DIV+CSS解决文字与图片居中问题”的内容了，经过本文的学习后，相信大家对怎么用DIV+CSS解决文字与图片居中问题这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
