Question

我正在尝试将四张图片与方括号中的标题对齐。

我正在使用以下HTML代码：

<div class="grid">
    <div class="post-block">
        <img src="img1.jpg" />
        <div class="caption">caption1</div>
    </div>
    <div class="post-block">
        <img src="img2.jpg" />
        <div class="caption">caption2</div>
    </div>
    <div class="post-block">
        <img src="img3.jpg" />
        <div class="caption">caption3</div>
    </div>
    <div class="post-block">
        <img src="img4.jpg" />
        <div class="caption">caption4</div>
    </div>
</div>

以及以下CSS代码：

.post-block {
    display: inline-block;
    position: relative;
    text-align: center;
}

如果图片和标题大小相同，一切都可以，但是当它们不同时，我会得到这个（例子）：

我尝试使用CSS对齐不同大小的图像和字幕但没有成功。我需要这样的东西：

任何帮助都将不胜感激。

提前致谢

Answer 1

您需要在图像和标题的相同DOM级别使用单独的块元素，以实现您在“右”图像中显示的内容。现在你的标题DIV嵌套在图像DIV中，那就是你要做的。标题DIV需要在之外图像DIV。

Answer 2

你可能希望每两张照片周围有两个独立的div包装器。然后将图像垂直对齐到底部。 Vertical align images to bottom

<div class="myWrapClass">
        <img src="my image">
        <img src="my image">
    </div>
    <div class="myWrapClass">
        <img src="my image">
        <img src="my image">
    </div>

然后通过内联或css文件设置样式

<div style="vertical-align:bottom;">

或

.myWrapClass{
vertical-align:bottom;
}

查看此网站...在那里使用css属性以保持响应 Example

对齐网格中的照片和标题

2 个答案: