How to Align Text Directly Beneath an Image

How to align text below an image in CSS?

Add a container div for the image and the caption:

<div class="item">
    <img src=""/>
    <span class="caption">Text below the image</span>
</div>

Then, with a bit of CSS, you can make an automatically wrapping image gallery:

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
}
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
.caption {
    display: block;
}

div.item {    /* To correctly align image, regardless of content height: */    vertical-align: top;    display: inline-block;    /* To horizontally center images and caption */    text-align: center;    /* The width of the container also implies margin around the images. */    width: 120px;}img {    width: 100px;    height: 100px;    background-color: grey;}.caption {    /* Make the caption a block so it occupies its own line. */    display: block;}

<div class="item">    <img src=""/>    <span class="caption">Text below the image</span></div><div class="item">    <img src=""/>    <span class="caption">Text below the image</span></div><div class="item">    <img src=""/>    <span class="caption">An even longer text below the image which should take up multiple lines.</span></div><div class="item">    <img src=""/>    <span class="caption">Text below the image</span></div><div class="item">    <img src=""/>    <span class="caption">Text below the image</span></div><div class="item">    <img src=""/>    <span class="caption">An even longer text below the image which should take up multiple lines.</span></div>

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

Put a text beneath an image

The easiest and shortes way would be to simply align the cards in a grid. For that use display: grid;. To have 2 cards aligned horizontally you need to add: grid-template-columns: repeat(2, 1fr); you can change the number 2 with the numebr of cards you want to have aligned next to each other. To seperate the cards from each other, you can use grid-gap: with a value of the gap you want to have.

.section-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
}

.section-2 div img {
  width: 100%;
}

<section class="section-2">
  <div>
    <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
    <p>I'm a Syrian Hamster</p>
  </div>
  <div>
    <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0736.jpg">
    <p>I like to eat watermelons</p>
  </div>
  <div>
    <img src="https://www.tacoshy.de/Images/Areno/IMAG0865.jpg">
    <p>I love to burrow tunnels and caves</p>
  </div>
  <div>
    <img src="https://www.tacoshy.de/Images/Areno/IMAG0863.jpg">
    <p>And I really enjoy sleeping in my self digged caves</p>
  </div>
</section>

how to add a caption like text under image in css

Use absolute positioning on the caption <p>
Make the container inline-block
Fiddle: jsfiddle.net/eohtwd1u

.images {  position: relative;  display: inline-block;}
.images p {  position: absolute;  width: 100%;  text-align: center;  bottom: 0;  left: 0;}

<div class="images">   <img src="https://placehold.it/350x150">   <p>Some text to appear</p></div>

Center Text Below Image in Table

It seems to be centered fine when I load your code, except the float:left on the image can throw it off (see my example. The image on the right is floated left and doesn't look as centered).

If you want the text under the image anyway, there's no need for float:left because that makes the image sit to the left of any elements after it. Depending on image size, the paragraph with the CONTENT text will move next to the image instead of below it.

Really it would be best to use an external stylesheet, all your inline code is hard to keep track of. Also, the margin:25px on the image will enlarge or shrink the image depending on the margin size: The margin expands or shrinks the table cell, and the 70% fixed width makes the image move with the size of the cell to keep the margin the same.

Don't forget you have cellspacing and cellpadding attributes to adjust the width between table cells, and the space around items in the cells: <table cellspacing="15"> will put 15 pixels cushion between cells.

Update: For the problems with longer captions pushing the image up, an easy solution is to put all the captions in their own table row. This still only uses one table, and the distance between the captions and the images can be adjusted with negative CSS margins. Example here.

Center text above images

The easiest and probably safest way is to pack the img & text in one div:

<div id="container">
    <div class="txtimg">
        100
        <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif">
    </div>
    <div class="txtimg">
        500
        <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif">
    </div>
    <div class="txtimg">
        1000
        <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif">
    </div>
</div>

and CSS:

.txtimg{
    display: inline-block;
    text-align: center;
}
.txtimg > img{
    display: block;
}

This way you will be able to float or position your img/txt combo like you want.

---

Related Topics