0

好的，我知道这里有很多关于这个的问题，应该是重复的，但老实说，我已经阅读了很多，每个都有它的特定案例/标记 - 我仍然无法正确...

我在小部件区域中有一个带有可能很长的文本的小图像。我需要进行中心对齐，并且当文本高于图像时，仍要与中心对齐（即使“高于”图像）-

小提琴在这里：http: //jsfiddle.net/as8xW/

我正在寻找一个通用解决方案跨浏览器并且没有表格

编辑我

更新答案后 - 我偶然发现并修改了一个可能的黑客（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 提供的解决方案一起使用 - 使其适用于我的测试......

编辑二

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

4

2 回答 2

1

V1：使用表格单元格

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

要使用，我必须在周围table-cell放置一个包装器，因为即使ing 也无法更改图像大小以匹配其他单元格。spanimgtable-cell

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
于 2012-06-23T07:36:18.437 回答
0

你可以试试这个

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 中导致小提琴错误，最好在新文档上尝试。

于 2012-06-23T08:45:26.010 回答