Getting link centered on top of each image

Question

I have a php loop that builds a list of images:

<?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?>

And this builds them 5 to a row (which is how I want to keep them as opposed to 1 per row stacked on top of each other.

The issue is my Delete link shows to the right of each image, running into the next row sometimes.

Is there a better way that I can get my link to display centered on each image?

Since this is an issue with HTML and CSS, please share the generated HTML code and your corresponding CSS. Otherwise it will be impossible to help... — andreas, Sep 26 '18 at 13:55

score 1 · Accepted Answer · answered Sep 26 '18 at 14:10

Try with this. You can find an example here 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?>

I think this will work, thanks! do you know how I can alter it to only make the delete and transparency show on hover? — Geoff_S, Sep 26 '18 at 15:33

score 0 · Answer 2 · answered Sep 26 '18 at 13:58

Your image and link must be contained on some element to you implement this as you want.

My suggestion:

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;
}

Of course you can use just a div as container, but I like to use ul and li to keep the html semantic.

score 0 · Answer 3 · answered Sep 26 '18 at 13:58

Enclose image and link inside a div and add css align center, that will resolve the issue

.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?>

Getting link centered on top of each image

3 Answers3