Question

好吧，我知道这里有很多问题，应该是重复的，但老实说，我已经阅读了很多，每个都有特定的案例/标记 - 我仍然不能做对了......

我有一个小图片，在小部件区域中可能有长文字。我需要进行中心对齐，当文本高于图像时，仍然要对齐到中心（即使“更高”然后是图像） -

我正在寻找跨浏览器的通用解决方案，没有表格

编辑我

更新答案后 - 我偶然发现并修改了可能的黑客攻击（jQuery）

这个脚本的作用实际上是将有问题的元素包装在表标记中 - 从而将它们转换为IE的实际表格。

假设我们有

.table     { display: table; }
.trow  { display: table-row; }
.tcell { display: table-cell; }

我们这样做：

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tcell").wrap("<td />");
    $(".trow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

将上述脚本与biziclop提供的解决方案一起使用 - 使其适用于我的测试...

编辑II

@biziclop解决方案VR2完美运行，从而使我的编辑我过时（或至少没有必要）

Answer 1

V1：使用table-cell

http://jsfiddle.net/as8xW/4/

要使用table-cell，我必须在span周围放置一个包装img，因为即使table-cell也不能更改图像大小以匹配其他单元格。< / p>

li: table-row
  span: table-cell, vertical-align:middle
    img
  a:   table-cell, vertical-align:middle

V2：使用内联块，一些固定宽度，适用于IE6

http://jsfiddle.net/as8xW/10/

li: block: FIXED WIDTH
  span: inline block (with IE treatment)
    img
  a:    inline block with FIXED WIDTH not to drop below the image

Answer 2

你可以尝试这个

HTML：

<div class="sidebar-box">
    <ul>
        <li>
            <div class="left-col">
                <img src="http://placehold.it/50x50" height="50" width="50">
            </div>
            <div class="right-col">
                <a href="http://localhost/wp-sandbox/?p=283" title="Results Photography">
                    Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography 
                </a> 
            </div>
        </li>
    </ul>
</div>

CSS

.sidebar-box {
    margin-bottom: 20px;
    float: left;
    width: 45%;
}

.sidebar-box img {
}

.sidebar-box li {
    margin: 0;
    display: block;
    overflow: hidden;
    zoom: 1;

}

.left-col {
    display: table-cell;
    vertical-align: middle;
    _float: left;
    *float: left;
    width: 65px;
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');
}
.right-col {
    display: table-cell;
    vertical-align: middle;
    _float: left;
    *float: left;
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px'); 
}

小提琴链接http://jsfiddle.net/cKmQ9/但它可以在IE6中导致小提琴错误，最好在新文档上尝试。

CSS - 图像的垂直对齐和没有表格的长文本

2 个答案: