DIV+CSS中图片和文字混排居中问题解决方案

最新推荐文章于 2024-08-16 15:59:23 发布

瞄了个猫

最新推荐文章于 2024-08-16 15:59:23 发布

阅读量6.2k

点赞数 2

分类专栏： DIV 问题及解决办法文章标签： css html 垂直居中

本文链接：https://blog.csdn.net/qq_34648000/article/details/52277106

版权

DIV 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

问题及解决办法

6 篇文章 0 订阅

订阅专栏

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

未设置文字和图片在同排同行时候上下垂直居中时，CSS实例图片如下:
这里写图片描述
说明：
以上为图片，后面跟着是文字段，可见虽然图片与文字在同行，但是文字未上下垂直居中，明显图片垂直居上，文字垂直居下。
DIV+CSS实例代码如下：

<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmls="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
<title>CSS测试</title> 
<style type="text/css"> 
body{font-size:12px;}
</style> 
</head> 
<body> 
<img src="https://www.baidu.com/img/2016_8_22bimushi_cddc674c4d103d98d2450f174b543628.gif" />测试文字  
</body> 
</html>

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

设置css使文字和图片同排同行时候上下垂直居中我们只需要在CSS样式，加入CSS代码如下：

img{vertical-align:middle;}

加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。
完整DIV+CSS代码如下：

<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmls="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
<title>CSS测试</title> 
<style type="text/css"> 
body{font-size:12px;}
img{vertical-align:middle;} 
</style> 
</head> 
<body> 
<img src="https://www.baidu.com/img/2016_8_22bimushi_cddc674c4d103d98d2450f174b543628.gif" />测试文字  
</body> 
</html>

此网页在浏览器中浏览样式图：
这里写图片描述
我们可以观察上图或自己轻松亲自动手拷贝以上完整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;}