Tips for centering elements in an image caption

Question

Tips for centering elements in an image caption

I need some help with separating an image and text within an image caption from each other. Currently, they are overlapping and I want them to be distinct. I attempted using inner div elements for the text and image separately, but it caused issues by breaking the image caption. How can I center elements within an image caption?

#gallery-img {
  position: relative;
}
#caption div {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #fff;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
}

<div id="gallery-img">
  <img src="http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg" alt="demo">
  <h2 id="caption"><div><b>Stats:</b> Advanced Mathematics<br/><a href="#">See more</a><img style="width:10%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"></div></h2>
</div>

I'm aiming for a design similar to this:

html image css

Answer 1

Answer №1

Check out this code snippet!

#gallery-img img {
  float:right;
  width:7%;
}
#gallery-img {
  color: #fff;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
}

<div id="gallery-img">
  <img src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png">
  <div id="caption"><b>Information:</b> Mathematics<br/><a href="#">Find out more</a></div>
</div>

Answer 2

Check out this code snippet!

#gallery-img img {
  float:right;
  width:7%;
}
#gallery-img {
  color: #fff;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
}

<div id="gallery-img">
  <img src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png">
  <div id="caption"><b>Information:</b> Mathematics<br/><a href="#">Find out more</a></div>
</div>

Answer 3

Answer №2

Surely you can use absolute positioning to place the image inside an h2:

#picture-container {
  position: relative;
}
#caption-description div {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #fff;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
}

#caption-description img{
  position: absolute;
  right: 20px;
  bottom: 10px;
}

<div id="picture-container">
  <img src="http://www.example.com/image.jpg" alt="example">
  <h2 id="caption-description"><div><b>Details:</b> Lorem Ipsum<br/><a href="#">Read more</a><img style="width:10%;" src="http://www.example.com/icon.png"></div></h2>
</div>

Answer 4

Surely you can use absolute positioning to place the image inside an h2:

#picture-container {
  position: relative;
}
#caption-description div {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #fff;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
}

#caption-description img{
  position: absolute;
  right: 20px;
  bottom: 10px;
}

<div id="picture-container">
  <img src="http://www.example.com/image.jpg" alt="example">
  <h2 id="caption-description"><div><b>Details:</b> Lorem Ipsum<br/><a href="#">Read more</a><img style="width:10%;" src="http://www.example.com/icon.png"></div></h2>
</div>

Answer 5

Answer №3

To make sure the #gallery-img container contains the image properly, apply float: left; or display: inline-block;. Set display: block; for the img to prevent extra white space and avoid layout issues on the page. Instead of using width: 100%;, consider using right: 0; on the #caption div within the boundaries of #gallery-img. Also, position #caption absolutely to ensure proper margin alignment instead of positioning the div inside it. Does this approach meet your desired outcome?

#gallery-img {
  position: relative;
  float: left;
}
#gallery-img img {
  display: block;
  }
#caption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
}

<div id="gallery-img">
  <img src="http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg" alt="demo">
  <h2 id="caption"><div><b>Stats:</b> Advanced Mathematics<br/><a href="#">See more</a><img style="width:10%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"></div></h2>
</div>

Answer 6

To make sure the #gallery-img container contains the image properly, apply float: left; or display: inline-block;. Set display: block; for the img to prevent extra white space and avoid layout issues on the page. Instead of using width: 100%;, consider using right: 0; on the #caption div within the boundaries of #gallery-img. Also, position #caption absolutely to ensure proper margin alignment instead of positioning the div inside it. Does this approach meet your desired outcome?

#gallery-img {
  position: relative;
  float: left;
}
#gallery-img img {
  display: block;
  }
#caption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
}

<div id="gallery-img">
  <img src="http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg" alt="demo">
  <h2 id="caption"><div><b>Stats:</b> Advanced Mathematics<br/><a href="#">See more</a><img style="width:10%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png"></div></h2>
</div>

Answer 7

Answer №4

figure {
  display: flex;
  align-items: flex-start;
}

figcaption {
  text-align: center;
}
img {
  width: 10%;
}

<figure>
  <figcaption><b>Information:</b> Important Details<br><a href="#">Learn more</a></figcaption>
  <img src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png">
</figure>

Answer 8

figure {
  display: flex;
  align-items: flex-start;
}

figcaption {
  text-align: center;
}
img {
  width: 10%;
}

<figure>
  <figcaption><b>Information:</b> Important Details<br><a href="#">Learn more</a></figcaption>
  <img src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png">
</figure>

Answer 9

Answer №5

Consider utilizing the main image as a background image for a simpler code structure. Position the copy and secondary image in separate divs and float them left and right within another container with margin set to 0 auto for centering. See sample code below.

#gallery-img {
  position: relative;
  background: url('http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg');
  width:640px;
  height:640px;
}
#caption {
  position:absolute;
  bottom:0;
  width: 100%;
  color: #fff;
  background: rgb(0, 0, 0);
  padding:15px 0;
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
}
#container {
  width:400px;
  margin:0 auto;
}

#copy {
  float:left;
  width:340px;
}

#image-container {
  float:right;
  width:40px;
}

h2 { margin: 0 }

<div id="gallery-img">
    <div id="caption">
      <div id="container">
        <div id="copy">
          <h2>
          <b>Stats:</b> Advanced Mathematics<br/>
          <a href="#">See more</a>
          </h2>
        </div>
        <div id="image-container">
          <img style="width:100%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png">
        </div>
      </div>
    </div>
</div>

Answer 10

Consider utilizing the main image as a background image for a simpler code structure. Position the copy and secondary image in separate divs and float them left and right within another container with margin set to 0 auto for centering. See sample code below.

#gallery-img {
  position: relative;
  background: url('http://www.umnet.com/pic/diy/screensaver/10/4a206b7a-8ee2.jpg');
  width:640px;
  height:640px;
}
#caption {
  position:absolute;
  bottom:0;
  width: 100%;
  color: #fff;
  background: rgb(0, 0, 0);
  padding:15px 0;
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
}
#container {
  width:400px;
  margin:0 auto;
}

#copy {
  float:left;
  width:340px;
}

#image-container {
  float:right;
  width:40px;
}

h2 { margin: 0 }

<div id="gallery-img">
    <div id="caption">
      <div id="container">
        <div id="copy">
          <h2>
          <b>Stats:</b> Advanced Mathematics<br/>
          <a href="#">See more</a>
          </h2>
        </div>
        <div id="image-container">
          <img style="width:100%;" src="http://images.clipartpanda.com/circle-clipart-pink-circle-clip-art-at-vector-clip-art-2.png">
        </div>
      </div>
    </div>
</div>

Tips for centering elements in an image caption

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Ways to eliminate unused classes from JQuery UI

Applying CSS borders with circular corners

Can data be transferred from node.js express to front-end HTML without requiring a page refresh?

Exploring the application of URL parameters in HTML code

Displaying a banner at the bottom of a React page

Is there a way to illuminate a complete row by simply hovering over a span within one of the columns?

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

Setting the z-index of the parent element causes issues with overlapping

Generate a random word using Typed.js

Encountering Issues with Formatting InnerHtml Text using RegEx

`A mistake occurred while building in the package.json file`

The mobile functionality of the stylesheet is not functioning properly

The battle between CSS and jQuery: A guide to creating a dynamic zebra-style table without relying on additional plugins

The content within the iframe is not displayed

What is the method for accessing HTML tag data within a script?

Converting dynamic content within a div into an interactive link

Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

jQuery Slider Showing Incorrect Images

The nonexistence of the ID is paradoxical, even though it is present

What is preventing the 'p:nth-child(1)' from functioning properly in my HTML code?