1

我有一个名为的 div images_box，其宽度为277px. 在那个 div 中，我有 9 个图像，只是存储为<a>标签。我让图像向左浮动并在我的 div 中很好地排列，但我希望图像垂直对齐，因为有些是纵向的，有些是横向的。我知道如果我将每个图像都包含在一个 div 中，我可以做到这一点，但是我用来启动画廊的插件将无法识别正在触发的图像，所以我需要将它们包含在<a>标签中。

这是我的代码，如果有人可以帮助我将图像水平和垂直对齐。我不希望图像歪斜。

#images_box a {
    float: left;
    padding: 9px;
    width: 70px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

我的数据

<div id="images_box">
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg" title="morning after[explored] (mariosworld343)">
        <img src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7234/7047458501_46a2203733_b.jpg" title="Self confined... (TVidhya)">
        <img src="http://farm8.staticflickr.com/7234/7047458501_46a2203733_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg" title="kleiner schrittmacher (KatjaGiersig)">
        <img src="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_b.jpg" title="(caro diario.)">
        <img src="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_m.jpg" alt="" />
    </a>
</div>
4

3 回答 3

1

我想我知道你想要什么。float: left没有必要并排获取图像。

#images_box {
    background: #eee;
    overflow: hidden; /* this div will get the height of the tallest element inside it */
    white-space: nowrap; /* prevent line-breaks */
}


#images_box a {
    padding:9px;
    display: inline-block; /* required to apply vertical-align as expected */
    vertical-align: middle;
}​

工作于：

  • 互联网浏览器 6+
  • 和现代浏览器

现场演示：http: //jsfiddle.net/vjDVp/1/

于 2012-06-17T07:56:17.570 回答
0

基本上，您似乎正在寻找：

#images a {
    padding: 9px;
    width: 70px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

您可以根据需要在哪里调整vertical-aligntotop或middle。不需要花车。您在原始问题中描述的尺寸已关闭，如果我误解了，请道歉。

另请注意，这display: table-cell不是 IE6/7 友好的，如果这很重要的话。

于 2012-06-16T21:12:48.453 回答
0

将 css 设置为图像，而不是a标签。给他们一个类名（以确保您的其他图像不受影响）并将您在问题中提供的代码应用于该（img.myclass）。或者，至少vertical-align.

另外，图片的尺寸是多少？根据是横向图像还是纵向图像，它们是否都具有相同的宽度、相同的高度或特定的大小？

哦，我不知道为什么，但text-align有时似乎也可以处理 img 标签。

于 2012-06-16T21:34:05.697 回答