在div+css中图片怎么样才能垂直居中或水平居中
4个回答
展开全部
如果图片在DIV里
============================================
<style type="text/css">
.nav{width:300px; height:100px; line-height:100px; text-align:center;}
</style>
<div class="nav">图片<img src="http://www.baidu.com/search/img/rss_xml.jpg"></div>
============================================
CSS里图片背景代码如：
.nav{background:url(01.gif) no-repeat 0px 0px;}
CSS里的两个0px一个是控制上下，一个是控制左右，可以使用负数
============================================
<style type="text/css">
.nav{width:300px; height:100px; line-height:100px; text-align:center;}
</style>
<div class="nav">图片<img src="http://www.baidu.com/search/img/rss_xml.jpg"></div>
============================================
CSS里图片背景代码如：
.nav{background:url(01.gif) no-repeat 0px 0px;}
CSS里的两个0px一个是控制上下，一个是控制左右，可以使用负数
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上的你说的是文字的水平垂直居中,图片水平居中只要text-align:center就行了,要垂直居中不可能,只能通过计算,给图片一个顶部边距
-------------------------
楼下的:margin-top: expression(( 150 - this.height ) / 2);
这个只能在IE下,FF下是不行,楼主就死心吧
-------------------------
楼下的:margin-top: expression(( 150 - this.height ) / 2);
这个只能在IE下,FF下是不行,楼主就死心吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试试这个看是不是这种
<!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>无标题文档</title>
<style type="text/css">
.lanrentuku {
float: left;
text-align: center;
width: 150px;
height: 150px;
margin: 5px;
border: 1px solid #ccc;
font-size: 1em;
line-height: 148px;
}
.lanrentuku img {
margin-top: expression(( 150 - this.height ) / 2);
}
</style>
</head>
<body>
<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="70" height="120" /> </div>
<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="90" height="80" /> </div>
<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="70" height="120" /> </div>
<div style="clear:both"><br />代码整理：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></div>
<p></p>
</body>
</html>
<!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>无标题文档</title>
<style type="text/css">
.lanrentuku {
float: left;
text-align: center;
width: 150px;
height: 150px;
margin: 5px;
border: 1px solid #ccc;
font-size: 1em;
line-height: 148px;
}
.lanrentuku img {
margin-top: expression(( 150 - this.height ) / 2);
}
</style>
</head>
<body>
<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="70" height="120" /> </div>
<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="90" height="80" /> </div>
<div class="lanrentuku"> <img src="http://www.lanrentuku.com/images/uppic/200807160819430.gif" width="70" height="120" /> </div>
<div style="clear:both"><br />代码整理：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></div>
<p></p>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一般用line-height设置行高，水平的话text-align，vertical-align也可以控制垂直居中
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
