今天很郁闷,图片和文字排在同一行,居然发现不能垂直居中了,左边的红色方块是图片(e2.gif),右边的是文字,效果如下:


CSS如何让同一行的图片和文字垂直居中对齐(FF,Safari,IE都通过)

我的css和html是这样的:

html:

<div class="main2_title">
     <img src="images/e2.gif" />您的位置:企业首页>产品展厅
</div>

CSS:

.main2_title {border-bottom:1px solid #ccc; height:34px; line-height:34px;}

习惯性的百度一下,网友们的回答都不行,比如用什么margin-top:3px;line-height:34px;height:34px;vertical-align:middle; 都一一试过了,还是得到相同的结果。

后来不知道哪里想到的注意,在css上加了一行。如下:

CSS(修改后):

.main2_title {border-bottom:1px solid #ccc; height:34px; line-height:34px;}
.main2_title img { float:left;}

刷新下,行了,得到想要的东西了,如图:

CSS如何让同一行的图片和文字垂直居中对齐(FF,Safari,IE都通过)

都是float惹的祸啊,现在明白了float有时候还是挺管用的。

相关文章:

  • 2021-10-16
  • 2022-12-23
  • 2021-11-17
  • 2021-11-17
  • 2022-01-18
  • 2021-12-31
  • 2022-12-23
猜你喜欢
  • 2021-10-19
  • 2022-12-23
  • 2021-11-17
  • 2022-12-23
  • 2021-11-17
  • 2021-12-05
  • 2021-12-21
相关资源
相似解决方案