div css 图片和文字上下居中对齐

最新推荐文章于 2024-06-04 15:43:57 发布

weixin_30955341

最新推荐文章于 2024-06-04 15:43:57 发布

阅读量975

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/workey/p/9195446.html

本文介绍了如何在不同浏览器中实现图片上下居中的方法，重点讨论了line-height与vertical-align属性的应用，确保在Firefox、Opera及IE等浏览器中的一致表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞.

拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox.

这里涉及到两个属性，一个是line-height，另一个是vertical-align。在IE里面，只需要line-height就可以实现这个效果，不过要想在firefox和opea里面也实现这样的效果，必须用到vertical-align，而且这是属性一定要定义在image上面，而不是定义在div上。

div:

 

<style type="text/css">
<!--
a
{
  color:#6096cf;
  text-decoration:none;
  font-size:12px;
}
.divcss{
width:500px;
height:12px;
vertical-align:middle;
text-align:position;
}


.divcss img{
vertical-align:middle; /*optional*/
}

 

.divcss a{
vertical-align:middle; /*optional*/
}
-->
</style>

顶顶顶顶<div id="AA" class="divcss"><img src="WebResourcef.gif" width="19" height="20" /> <a href="javascript:DoPostBack('1','A');" >A--马克思马克思主义、列宁主义、毛思想、邓理论</a></div>
<div id="A"></div>

转载于:https://www.cnblogs.com/workey/p/9195446.html