CSS:在静态定位的 div 内垂直居中具有不同高度/宽度的图像
这完全难住了我。我对 CSS 和 CSS 还很陌生。 DIV,所以请耐心等待。
我正在尝试制作一个基于 DIV 的图片库。
布局如下......
<div id="container">
<div class="row">
<div class="img-container">
img
</div>
...more img-containers
</div>
...more rows
</div>
图像都是缩略图形式,但缩略图大小不同(但都小于150x150px),这似乎排除了我发现的所有垂直对齐解决方案,特别是与事实上,行 div 和容器是静态定位的。
如果之前有人问过这个问题,我很抱歉,但我已经浏览了这个网站和谷歌几个小时,但没有找到任何似乎有效的东西。
预先感谢您的任何帮助!
EDIT3:作为参考,我正在开发的网站在这里: http://utsa.edu /honors/?page=international/china_new
EDIT1:@Robert:感谢您的班级/id 建议。改变了这一点。我不相信你建议的垂直居中会起作用。由于您的图像大小相同,因此填充和填充都相同。边距将它们居中。我的都是不同高度的。
编辑2:@Nowhere:这是我尝试的第一件事。据我所知,它不起作用,因为包含的 DIV 不是绝对定位的。但我不知道。
This is completely stumping me. I'm pretty new to CSS & DIVs so please bear with me.
I'm trying to make a DIV-based image gallery.
The layout is as follows...
<div id="container">
<div class="row">
<div class="img-container">
img
</div>
...more img-containers
</div>
...more rows
</div>
The images are all in thumbnail form but the thumbnails vary in size (but all less than 150x150px) which seems to rule out all of the vertical-align solutions I've found, especially when combined with the fact that the row divs and the container are statically positioned.
I'm sorry if this has been asked somewhere before but I have looked through both this site and Google for hours and haven't found anything that seems to work.
Thanks in advance for any help!
EDIT3: For reference, the site I'm working on is here: http://utsa.edu/honors/?page=international/china_new
EDIT1: @Robert: Thanks for the class/id suggestion. Changed that. I don't believe the vertical centering you suggested is going to work though. Since your images are all the same size the padding & margins center them. Mine are all different heights.
EDIT2: @Nowhere: That was the first thing I tried. From what I've read, it's not working because the containing DIVs aren't positioned absolute. I don't know though.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
.img-container img {vertical-align: middle ;}
对于我来说,处理不同高度和宽度的图像效果很好。它们的垂直中心正确对齐...如果您在 CSS 中找不到解决方案,您可能需要考虑让程序从现有缩略图生成图像:将它们转换为最大缩略图尺寸的图像,围绕具有透明边框的较小的文件(采用支持透明度的格式,例如 PNG)。
.img-container img {vertical-align: middle ;}
works fine for me with images of different heights and widths. Their vertical centers are correctly aligned...If you don't find a solution within CSS, you might want to consider having a program generate images from the existing thumbnails: you convert them to images of the size of the biggest ones, surrounding the smaller ones with a transparent border (in a format that supports transparency like PNG).
我将使用浮动行 div 中左侧的每个图像容器和图像容器内的自动居中图像的组合。
我可以这样做。如果您打算在文档中多次使用任何 div id,我建议您将其更改为 div 类。
I would use a combination of floating each image container left within the row div and auto center the images within the image container.
Here's how I might do it. I recommend you change any div id to a div class if you plan on using it more than once in your document.