vertical align img

我有一个名为images_box的div，其宽度为277px。在那个div里面我有9张图片，只是存储为<a>标签。我已经将图像向左浮动并且很好地排列在我的div内，但是我希望图像垂直对齐，因为有些图像是纵向图像，其他图像是横向图像。我知道我可以做到这一点，如果我把每个图像放在一个div中，但我用来启动画廊的插件不会识别哪个图像正在被触发，所以我需要将它们放在<a>标签内。vertical align img

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

#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>

来源

2012-06-16 JK36

您正在寻找Vertica的l无论图像高度如何，都以中心线为中心，或垂直对齐到顶端？ – Tom

尝试添加一个'line-height：70px'。也清理一下你的问题。你的html表示'图像'和你的css'图像箱'。此外，您的HTML中的图像比70px大得多。 – Gerben

嗨汤姆，是的，这正是我想要做的。 Gerben，谢谢，更新了原始文章 - 添加了您的建议，但我的图片仍然保持最佳状态。 – JK36

我想我想出你想要什么。并不需要并排获取图像。

#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; 
}

作品在：

的Internet Explorer 6+
和现代浏览器

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

来源

2012-06-17 07:56:17

感谢top-trois，您的解决方案很棒，解决了我遇到的问题。我很惊讶你不需要浮动：左 - 认为这是让我的照片在我的部分正常流动的唯一方法，但显然不是。再次感谢：） – JK36

基本上，好像你正在寻找：

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

在那里你可以调整vertical-align到top或middle，根据需要。没有必要漂浮。您在原始问题中描述的维度已关闭，因此如果我误解了，请致歉。

还要注意，display: table-cell不是IE6/7友好的，如果有关系。

来源

2012-06-16 21:12:48 Tom

嗨汤姆，那正是我想要的，虽然图像不包含在我的div。所以我添加一个float：left，并且图像在顶部而不是中心对齐。 – JK36

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

此外，图像的大小是什么？它们都具有相同的宽度，相同的高度或一定的大小，具体取决于它是横向还是纵向图像？

哦，我不知道为什么，但text-align似乎有时也在工作img标签。

来源

2012-06-16 21:34:05 poepje

vertical align img

回答

相关问题