将链接集中在每个图像的顶部[重复]答案

【问题标题】：Getting link centered on top of each image [duplicate]将链接集中在每个图像的顶部[重复]
【发布时间】：2019-03-02 07:52:19
【问题描述】：

我有一个构建图像列表的 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 个堆叠在一起。

问题是我的删除链接显示在每张图片的右侧，有时会跑到下一行。

有没有更好的方法可以让我的链接在每张图片的中心显示？

【问题讨论】：

由于这是 HTML 和 CSS 的问题，请分享生成的 HTML 代码和您对应的 CSS。否则将无法提供帮助......

标签： html css

【解决方案1】：

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

我的建议：

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 语义。

【讨论】：

【解决方案2】：

将图片和链接包含在一个 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】：

试试这个。你可以在这里找到一个例子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?>

【讨论】：

我认为这会起作用，谢谢！你知道我怎样才能改变它，只在悬停时显示删除和透明度吗？