0

设想

我正在尝试使用表格单元格方法（'使用 CSS 垂直居中的 6 种方法'@Vanseo Design）垂直对齐 aimg内部：div

<style>
    .container{border: solid 1px #000;display:table;}
    .contentItem{display:table-cell;vertical-align:middle;}
    .contentImg{float:left; width: 50px; margin: 3px;}
    .contentDiv{width: 400px; padding: 10px 2px 2px 2px;}
</style>
<div class="container">
    <div class="contentItem">
        <img class="contentImg" title="test" src="tv1.gif"/>
        <div class="contentDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.</div>
    </div>
</div>

问题

它根本行不通。这是一个（不）运行的 jsFiddle示例。

事实

  • 我正在使用 Chrome
  • 图像宽度必须设置为固定值（例如 50px）
  • 图像高度是可变的，在图像加载之前是未知的
  • 无法删除 contentDiv div 标签。实际上它包含一个复杂的结构，而不是简单的文本，具有动态数据。
4

4 回答 4

3

尝试这个

<div class="container">
    <div class="contentItem">
        <img class="contentImg" title="test" src="data:image/gif;base64,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"/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.
    </div>
</div>

CSS

.container{border: solid 1px #000;display:table;}
.contentItem{display:table-cell;vertical-align:middle;}
.contentImg{float:left; width: 50px; margin: 3px;vertical-align:text-top;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

如果您无法摆脱 div，那么只需更改 css

.contentDiv{width: 400px; padding: 0px 2px 2px 2px;}
于 2013-05-22T09:23:29.757 回答
1

当您浮动图像时，您的垂直对齐不起作用。如果您从图像中删除浮动，然后将文本 div 设置为 inline-block 元素，那么您的对齐方式将起作用：

.contentImg{width: 50px; margin: 3px;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px; display:inline-block;}

http://jsfiddle.net/Z8GaT/1/

于 2013-05-22T09:35:19.497 回答
0

或者简单地说：

.yourClass{
     position: relative;
     top: 50%;
     margin-top: - "the height of your image" / 2+px;
 }

请注意，如果不清楚，margin-top 值应该减去图像的高度除以 2。

于 2013-05-22T09:31:08.727 回答
0

请在此处查看演示

消除 

.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}

可能这可以解决您的问题:)。

于 2013-05-22T09:43:32.603 回答