Tips for preventing a figcaption from shifting the image position

I'm trying to add a figcaption to an image without moving the image from its original position due to the figcaption. Below is the CSS code I'm using for the figcaption.

Here is the code for an image with a figcaption.

figcaption {
  text-align: center;
  display: inline-block;
}
<figure>
  <a href="https://ibb.co/CbSzPRr">
    <img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
  </a>
  <br>
  <figcaption>
    <div>Retouched, Untagged</div>
  </figcaption>
</figure>

Additionally, here is a screenshot showing the current appearance. The image on the left is showing the desired position of the image, while the one on the right demonstrates the issue with the figcaption being slightly up and to the left.

https://i.sstatic.net/DbrxO.png

I am relatively new to coding, so any suggestions or tips would be greatly appreciated. Thank you in advance! I believe there may be a straightforward solution that I'm overlooking.

htmlcss

Answer №1

Are you in search of a solution like this -

figure {
  display: block;
  float: left;
  width: 200px;
  margin: 20px
}

figcaption {
  display: block;
  text-align: center;
  width: 100%;
}
<figure>
  <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>

</figure>

<figure>
  <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>
  <figcaption>
    <div>Retouched, Untagged</div>
  </figcaption>

</figure>

<figure>
  <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>

  <figcaption>
    <div>The image remains in the same row without being displaced</div>
  </figcaption>

</figure>

The provided code ensures that all images are displayed in a single row with captions positioned beneath them, preventing misalignment.

Alternatively, you can place captions over the images by using -

.row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-X: scroll;
}

figure {
  display: block;
  float: left;
  position: relative;
  margin: 30px 15px
}

figcaption {
  position: absolute;
  bottom: 0;
  background: #fff;
  opacity: .7;
  width: 100%;
  text-align: center;
}

.row-separator {
  height: 5px;
  background-color: grey;
  margin: 20px 10px;
}
<div class="row">
  <figure>
    <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>

  </figure>

  <figure>
    <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>
    <figcaption>
      <div>Retouched, Untagged</div>
    </figcaption>

  </figure>

  <figure>
    <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>

    <figcaption>
      <div>caption on image</div>
    </figcaption>

  </figure>
  <figure>
    <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>

    <figcaption>
      <div>caption on image</div>
    </figcaption>

  </figure>
</div>

<div class="row-separator"></div>

<div class="row">
  <figure>
    <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>

  </figure>

  <figure>
    <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>
    <figcaption>
      <div>Retouched, Untagged</div>
    </figcaption>

  </figure>

  <figure>
    <a href="https://ibb.co/CbSzPRr"><img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0"></a>

    <figcaption>
      <div>caption on image</div>
    </figcaption>

  </figure>
</div>

We trust this information will be beneficial to you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the modal is closed, the textarea data remains intact, while the model is cleared

My challenge involves a simple modal that includes a text area. The issue I am facing is resetting the data of the textarea. Below is the modal code: <div class="modal fade" ng-controller="MyCtrl"> <div class="modal-dialog"> <d ...

javascripthtmlangularjstwitter-bootstrap

My dropdown does not appear to be moving up properly in responsive mode

<!DOCTYPE html> <html> <?php include 'includes/head.php'; ?> <body> <?php include 'includes/header.php'; ?> head.php:- <head> <meta name="viewport" content="width=device-width, initial-scale=1"& ...

phphtmltwitter-bootstrap-3

A unique way to present data: An HTML table featuring four fixed columns with horizontal scrolling

I've been having difficulty creating a table with fixed first four columns while allowing the rest to scroll horizontally. I came across this example first column fixed Although the example has the first column fixed, I'm struggling to extend it ...

csshtml-table

Embed a video onto a webpage using HTML and ensure it is responsive by implementing Bootstrap's grid

I am currently using the mPurpose-master bootstrap theme, which offers a feature allowing the placement of 3 blocks in a row that are fully responsive. <div class="section"> <div class="container"> <div class="row"> ...

csshtmltwitter-bootstrapvideo

How can I center the navbar logo and use it as a toggle for collapsing the menu?

This is a simple example of a navigation bar <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class ...

htmlcssnavbarreact-bootstrapbootstrap-5

Best Way to Eliminate "#" Symbol from URL Address in UI-Router

My website URL is structured as follows: This is the index page where I utilize Angular UI-Router to navigate to different views, however, the URL retains the hash symbol (#) like this: Query: I am looking for a way to eliminate/remove the hash tag from ...

javascripthtmlangularjsangular-ui-router

Ways to expand flexbox to occupy the entire container

I have a scenario where I want two flexboxes in a container to fill the entire height of the container. The left flexbox should display an image that fills its entire space, while the right flexbox contains other content. However, I'm facing difficult ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to separate two <a> tags using only Bootstrap?

Currently, I am utilizing a PHP for loop to display 10 tags on an HTML page. My challenge lies in wanting the <a> tags to be displayed on separate lines with some spacing. It's common practice to handle this through custom CSS, however, is ther ...

htmlcsstwitter-bootstrap-3bootstrap-4

Issue with Material UI React: Navbar does not properly align the box to the right side

https://i.sstatic.net/CHSwp.png I'm facing an issue with my navbar that is supposed to align all the page options to the right. Despite using a flexbox layout and trying different alignment properties like alignSelf: end, the text only moves slightly ...

htmlcssreactjsmaterial-ui

Flexbox can be incorporated with a slide down animation to create

Currently I am attempting to replicate the "slideUp" and "slideDown" features in jQuery while utilizing a flexbox for display! jQuery.fn.toggleFlexbox = function() { var elm = $(this[0]); if(elm.css('display') === "none"){ elm.cs ...

jqueryhtmlcssflexbox

Inconsistency in width of Bootstrap 4 card layouts

On my webpage, there are three cards displayed as seen in image 1. However, the cards do not have the same width in columns 1. When viewed on mobile (Chrome), the widths are all different and the bottom two cards are touching, as shown in image 2. How can ...

htmlbootstrap-4bootstrap-grid

Tips for transferring information between two distinct pages utilizing the jQuery POST technique

I'm dealing with two PHP files called card_process.php and payment.php. My goal is to transfer data from the cart_process page to the payment page. Here's a snippet of the code: In cart_process.php: $paynow = "<button type='submit' ...

javascriptphpjqueryhtmljson

The inline display property does not function properly with the <li> element

Here is the HTML code snippet I am working with: <div class="nav"> <ul class="nav-dots"> <li class='ni n1'><a href="" class='nia'>dot</a></li> <li class='ni n2'><a href="" clas ...

htmlcss

What could be causing my tabs to shift to the vertical side when using large, larger, and wide screens?

In my previous research, I came across a question similar to mine: Pure CSS accordion not working within CSS tabs. The solution mentioned works perfectly on monitors of any size, but the difference lies in the use of the a element. In their code, setting t ...

htmlcss

Group a set of x elements together within a div, and then group a distinct number of elements together after every x-grouping

Is there a way to achieve a looping structure like this? For instance: Group every 2 divs into a new div, then (after every 2nd grouping) group every 3 divs together <div id="container"> <div></div> <div></div> ... </div& ...

javascriptjqueryhtmlwrapall

The image in the footer seems to have a mind of its own, refusing to stay put and instead choosing to wander

Is it possible to add a small icon at the bottom of the footer that scrolls up or down as I scroll, instead of remaining fixed? I'm unsure if the issue lies in setting the image as sticky on scroll or if it's a CSS error. I attempted to set the ...

htmlcss

Problem with AJAX updating CSS class

My HTML table features a column that displays a Yes/No option. When a user switches the option from Yes to No or vice versa, it triggers an AJAX call to a PHP script which updates the corresponding record in the database. Everything is functioning correctl ...

phpjqueryhtmlajax

I'm having issues with my navigation bar, and the border on the right side is not functioning correctly

I've been struggling to get the right border positioned between each section of my nav bar. I've tried wrapping each word in a separate span, but it doesn't seem to cooperate. The borders end up on the side and are too small to fill the enti ...

htmlcssnavigationborder

Guide for verifying the minimum and maximum values when selecting a particular product from a dropdown menu

My goal is to implement validation for the width textbox when a user selects a specific product from the dropdown menu. The validation should only allow the user to enter a value between 10 and 200. I have successfully retrieved the selected value, but I ...

javascriptjqueryhtml

How to create a CSS-only dropdown menu for IE 6 without relying on JavaScript?

While browsing different sites, I came across numerous css/js menu scripts that function well in browsers such as FF, IE7, Safari, and Opera when JavaScript is enabled. However, they do not work properly in IE 6 without a small JS file added to support t ...

cssaccessibility