li元素的垂直对齐中间(多行文本),图像向左浮动

时间:2011-02-14 10:42:56

标签: html css

更新1

似乎以下版本在IE&铬

http://jsfiddle.net/gabel/RYjn6/7/

它仍然是轻量级的,不使用css表单元格样式或一堆包装div。


我们的想法是将图像中的图像浮动并将对齐“中间右侧的”某些文本“对齐到图像。但现在对我来说没有什么工作正常,纵向对齐失败,位置相对根本不起作用。有什么想法吗?

背景 - 图像CSS不可选,因为所有浏览器都无法调整图像大小。

示例http://jsfiddle.net/gabel/RYjn6/1/

HTML

<ul class="speciallist">    
  <li>
     <a href="#">
     <img src="http://farm6.static.flickr.com/5098/5444290347_d398028d26_t.jpg" />
         Some Text and some more text  and some more text <span style="color: black;"> and some more text</span>
     </a>
  </li>
  <li>
     <a href="#">
     <img src="http://farm5.static.flickr.com/4104/5444891066_45b883b819_t.jpg" />
       Some Text and some more text
     </a>
  </li>
</ul>

CSS

ul.speciallist li a {
  display: block; 
  width: 95%; 
  overflow: hidden; 
  display: inline-block; 
  text-decoration: none;
  background-color: #efefef;
  padding: 5px;
  margin-bottom: 3px;
}

ul.speciallist img {
  float: left;
  width: 100px;  
  margin-right: 5px;
  border: 1px solid #888;
}

0 个答案:

没有答案