主页 > 软件教程

CSS实现单行图片文字垂直居中代码

软件教程 2024-01-09

在 Web 前端开发过程中,有时会遇到单行图片与文字垂直居中的情况,以前可以用 “<img src=" " align="absmiddle">文字”来实现对齐, 但 W3C 标准不支持,所以只能用新的形式。其实新的形式也很简单,只需在 CSS 中设置 img 的 vertical-align:middle,以下是代码。

<!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=gb2312" />
<title>CSS实现单行图片文字垂直居中</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
.content{width:700px; margin:0 auto;}
.content_list{border:1px solid #ccc; list-style-type:none;}
.content_list li img{vertical-align:middle;}
</style>
</head>
<body>
<div class="content">
<ul class="content_list">
<li><img src="/a/g.jpg" alt="CSS实现单行图片文字垂直居中" /> CSS实现单行图片文字直居中</li>
</ul>
</div>
</body>
</html>

  以上示例在IE6、IE7、IE8和火狐均测试通过。


标签: CSS实现单行图片文字垂直居中

电脑软硬件教程网 Copyright © 2016-2030 www.computer26.com. Some Rights Reserved.