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:

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

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

Incorporate a fontawesome icon into a dynamically created button using ajax

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

Is the CSS content-visibility property compatible with background images?

Is it acceptable to include a checkbox and a hidden input within a label element?

Learn how to display two rows of div elements within a single div container

Slideshow featuring cards with text overlay

What is the best approach for resolving the issue of User having an Unknown field(s) (Id_card_number) specified in the system

Enhancing jQuery Rating Plugin

What is the best way to scale a div proportionally within a bootstrap grid?

Utilize CSS for Sticky Headers to Create Full Page Scrollbars for Table Control

Using a MySQL statement within a conditional statement

Submit image and transfer it to server using AngularJS and Jersey

Having a newline between HTML elements can disrupt the structure of an HTML layout

Sending information from JavaScript to Python scripts: best practices

Issue with radio button not updating when selected

Tips for repairing a horizontal line at the bottom of the <TD> tag and placing text on top

The hover effect does not function on an SVG element when it is placed within an external file

Tips for accessing the height property of an image

Retrieving data from an external PHP script

Obtain information about a div element while scrolling