这篇文章主要介绍了DIV+CSS怎么实现文字与图片上下垂直居中的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇DIV+CSS怎么实现文字与图片上下垂直居中文章都会有所收获，下面我们一起来看看吧。
DIV+CSS实例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS实例讲解测试</title>
<style type="text/css">
body{ font-size:12px;}
</style>
</head>
<body>
<img src="/file/upload/202210/19/xonvswncfg1.jpg"
alt="我是高度为37的DIVCSS5图片" />DIVCSS5测试文字CSS
</body>
</html>
说明首先我们设置此网页body内文字css样式为12px。然后在html引入图片(扩展：CSS引入-CSS引用)及在图片后跟几个测试文字。
设置css使文字和图片同排同行时候上下垂直居中
我们只需要在CSS样式，加入CSS代码如下：
img{ vertical-align:middle;}
加入以上对图片设置上下居中CSS样式即可让在同排文字和图片垂直居中。
完整DIV+CSS代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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="/file/upload/202210/19/xonvswncfg1.jpg"
alt="我是高度为37的DIVCSS5图片" />DIVCSS5测试文字
</body>
</html>
关于“DIV+CSS怎么实现文字与图片上下垂直居中”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“DIV+CSS怎么实现文字与图片上下垂直居中”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
