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="//www.css5.com.cn/images/CSS5.jpg" alt="我是高度为37的CSS5图片" />CSS5测试笔墨CSS
</body>
</html>

阐明起首咱们设置此网页body内文字css名目为12px。而后在html引入图片(扩大：CSS引入-CSS引用)及在图片后跟几个测试笔墨。你梗概拷贝以上代码新建成html网页，再到涉猎器中浏览此新建的网页，毕竟将如上图。

设置装备摆设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="//www.css5.com.cn/images/CSS5.jpg" alt="我是高度为37的CSS5图片" />CSS5测试翰墨
</body>
</html>

咱们或者考察上图或本人轻松亲踊跃手拷贝以上残缺css代码和html源代码(源代码)就可完成与操作把持css上下垂直居中才力。

DIV CSS舒展与进步假定我们配置".yangshi"的高度与line-height，要想此DIV中内容垂直居中一样咱们设置vertical-align:middle就可，CSS代码下列： .yangshi img{vertical-align:middle;} 这里值得说白的是高度和line-height不一定要大于图片高度，不然也会呈现“CSS HACK”在差异浏览器中不兼容状况。

CSS总结： 1、径自文字垂直居中咱们只须要配置CSS花式line-height属性就可。 2、笔墨与图片同排，在设置装备摆设div高度同时再对此css花色的图片“img”花式设置vertical-align:middle垂直居中属性，如.yangshi img{vertical-align:middle;}

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/shili/s51709.shtml