Question

我有一些以div为中心的链接图片。在最后一张图片之后，我想添加一个文本链接。由于某种原因，链接不会环绕图像，它们位于图像下方，这意味着我的文本链接最后与图像本身下方的前一个链接一致。我想要的是文本链接至少与图像一致。

如果我float图像周围的链接，那么它们与图像的大小相同，一切都按预期工作，但是图像不会在主div中居中。图像的数量可以改变，它们的尺寸也可以改变，所以我不能使用绝对或类似的东西来设置它们。

如何在不使用float的情况下使链接与其周围的图像具有相同的大小和位置，以便以下链接与图像一致？

Answer 1

如果你有一个容器div是位置相对的，那么你可以在其中有一个div，其位置绝对位置相对于包含div而不是整个窗口。

这样可以让你保持居中的图像，同时将链接放在你想要的任何地方。

#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }

这是一个小提琴：http://jsfiddle.net/RFzMv/39/

Answer 2

除了第三个子div之外，HTML几乎和你的一样。我将文本包装在<span> div中，然后由a.imageCount链接包含。

<div class="centered"> 
    <a class="image-link" href="">
        <img src="http://placekitten.com/100/100" width="100" height="100" />
    </a>

    <a class="image-link" href="">
        <img src="http://placekitten.com/110/110" width="100" height="100" />
    </a>

    <a href="#photos" class="imageCount">
        <span>some text</span>
    </a>
</div>

CSS看起来像这样：

.centered {
    width: 500px;
    height: 300px;
    background-color: #EEE;
    text-align: center;
}
a {
    text-decoration: none;
    outline: 1px dotted blue;  /* optional to show content boxes */
}
.image-link {
    display: inline-block;
    vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
    vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
    display: inline-block;
    border: 1px solid blue;  
    padding: 5px;
    border-radius: 5px;
    background-color: lightgray;
    margin-left: 10px;
}
.imageCount span {
    /* in case you need to style the text in a special way */
}

您可以在http://jsfiddle.net/audetwebdesign/uBVHC/

看到演示小提琴

如何运作

基本上，div.centered中有三个内联块子元素，因此文本对齐可以按预期工作。

我认为其中一个图像将是该行中最高的元素，并且您希望对a.imageCount的位置有一些控制。

如果您将vertical-align属性应用于.image-link，则会确定图像相对于a.imageCount元素的垂直对齐方式。您可以尝试三个主要值（顶部，中间，底部）并选择一个适合您想要的设计。

如果您想调整顶部（或底部）位置，只需使用.imageCount上的display: top (or bottom)和.image-link上的顶部（或底部）边距。

您可以在.imageCount上调整左边距的水平间距。

强制链接匹配图像大小而不在CSS中浮动

2 个答案: