扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了“怎么用DIV+CSS解决文字与图片居中问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用DIV+CSS解决文字与图片居中问题”吧!
宝安ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!
DIV+CSS文字与图片上下垂直居中
未设置文字和图片在同排同行时候上下垂直居中时,CSS实例图片如下:
说明:
以上“www.divcss5.com”为divcss5网网址图片,后面跟着是文字段,可见虽然图片与文字在同行,但是文字未上下垂直居中,明显图片垂直居上,文字垂直居下。
◆DIV+CSS实例代码如下:
DIV+CSS实例讲解测试 body{font-size:12px;} DIVCSS5测试文字CSS
说明首先我们设置此网页body内文字css样式为12px。然后在html引入图片(扩展:CSS引入-CSS引用)及在图片后跟几个测试文字。你可以拷贝以上代码新建成html网页,再到浏览器中浏览此新建的网页,结果将如上图。
设置css使文字和图片同排同行时候上下垂直居中
我们只需要在CSS样式,加入CSS代码如下:
img{vertical-align:middle;}
加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。
◆完整DIV+CSS代码如下:
CSS实例讲解测试 body{font-size:12px;} img{vertical-align:middle;} DIVCSS5测试文字
此网页在浏览器中浏览样式图:
我们可以观察上图或自己轻松亲自动手拷贝以上完整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解决文字与图片居中问题这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流