Question

我有一个构建图像列表的php循环：

<?php foreach($imageResult as $im):?>

    <img class="contentImage" src="<?php echo $im['url'] ?>" style="max-width: 150px; height: auto;">
    <a href="deleteImage.php?imageID=<?php echo $im['ID']?>">Delete</a> 

<?php endforeach?>

这会将它们构建为5列（这就是我想让它们保持相对的位置，而不是每行1个堆叠在一起。

问题是我的“删除”链接显示在每个图像的右侧，有时会进入下一行。

有没有一种更好的方法可以使我的链接显示在每个图像的中心？

Answer 1

尝试一下。您可以在这里https://jsfiddle.net/zot7k0b3/

找到示例

.box-image {
  width: 20%;
  float: left;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-image:nth-child(6n+6) {
  clear: left;
}

.box-image img {
  width: 100%;
  max-width: 150px;
}

.box-image a {
  position: absolute;  
  color: #fff;
  text-decoration: none;
}

<?php foreach($imageResult as $im):?>
<div class="box-image">
  <img class="contentImage" src="<?php echo $im['url'] ?>">
  <a href="deleteImage.php?imageID=<?php echo $im['ID']?>">Delete</a>
</div>
<?php endforeach?>

Answer 2

您的图像和链接必须包含在某些元素上，才能根据需要实现此目的。

我的建议：

html：

<ul class="images">
<?php foreach($imageResult as $im):?>
    <li>
        <img class="contentImage" src="<?php echo $im['url'] ?>" style="max-width: 150px; height: auto;">
        <a href="deleteImage.php?imageID=<?php echo $im['ID']?>">Delete</a> 
    </li>
<?php endforeach?>
</ul>

css：

ul.images {
    // The next two lines removes ul appearance.
    list-style: none;
    margin: 0;
}

ul.images > li {
    position: relative;
}

il.images > li > a {
    position: absolute;

    // Play with this values to position your link in the right place.
    top: 0;
    right: 0;
}

当然，您只能使用div作为容器，但我喜欢使用ul和li来保留html语义。

Answer 3

将图像封闭并链接到div内，并添加css对齐中心，这将解决问题

.contentImageContainer {
  width: 150px;
  text-align: center;
  display: inline-block;
}

.contentImage {
  max-width: 100%;
}

<?php foreach($imageResult as $im):?>
  <div class="contentImageContainer">
    <img src="<?php echo $im['url'] ?>" style=""/>
    <a href="deleteImage.php?imageID=<?php echo $im['ID']?>">Delete</a>
  </div>
<?php endforeach?>

使链接居中于每个图像的顶部

3 个答案: