CODEWITHSUNDEEP
htmlcss
polak polkovski
polak polkovski

Reputation: 97

Center text above images

I have a question: how can I center the text above the appropriate image?

#container {
  text-align: center;
}

.text {
  display: inline-block;
  margin: 0 20px 0 20px;
}

.img {
  margin: 0 20px 0 20px;
  width: 50px;
  height: 50px;
}
<div id="container">
  <div class="text">100</div>
  <div class="text">500</div>
  <div class="text">1000</div>
  <br>
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
</div>

I've tried a lot of ways, but I couldn't get a good effect.

How it should look:

Upvotes: 0

Views: 5424

Answers (6)

Peter
Peter

Reputation: 303

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

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

.txtimg>img {
  display: block;
}
<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>

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

Upvotes: 0

Jenil J
Jenil J

Reputation: 3

This is used to write text above the image:

<style>
  #container {
    position: relative;
    text-align: center;
    color: black;
  }
        
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div id="container">
  <div>
    <img src="https://source.unsplash.com/random" class="img">
    <div class="text">100</div>
  </div>
</div>

Upvotes: 0

Stacy Chen
Stacy Chen

Reputation: 219

This is what I would do :

.image {
    position:relative;
}

.text {
    position:absolute;
    text-align:center;
}

Upvotes: 0

David Thomas
David Thomas

Reputation: 253506

One approach in modern browsers is to use CSS flexbox layout:

#container {
  /* displays the element, and its contents, according
     to the flexbox layout: */
  display: flex;

  /* allows content to wrap to a new line: */
  flex-wrap: wrap;

  /* aligns the first and last elements of each 'row'
     to the left and right sides of the element
     and allows space between the elements that fall
     between the first and last: */
  justify-content: space-between;
}

#container div.text,
#container img.img {

  /* setting the elements to align themselves
     to the center of their available 'box': */
  align-self: center;
  text-align: center;
  width: 30%;
}
<div id="container">
  <div class="text">100 adding some extraneous and irrelevant text to try and ensure that the text exceeds the width of the &lt;img&gt; below...</div>
  <div class="text">500</div>
  <div class="text">1000</div>
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
</div>

Or, alternatively but also in modern browsers, using CSS grid layout:

#container {

  /* displays the element and its contents using
     the CSS grid layout: */
  display: grid;

  /* defines three columns each of which takes
     one fractional unit of the available space: */
  grid-template-columns: repeat(1fr, 3);

  /* defines two rows each of which is set to
     'min-content', which allow the contained
     elements to take the vertical space they
     require: */
  grid-template-rows: repeat(min-content, 2);
  margin: 0 auto;
}

div.text,
img.img {

  /* to allow for a small 'gutter' between
     columns: */
  max-width: 90%;
  text-align: center;
}

div.text {

  /* assigning the matched elements to
     the first row, allowing the brwoser
     to place the elements in the correct
     grid box according to the order in
     the DOM: */
  grid-row: 1;
}

img.img {
  grid-row: 2;
}
<div id="container">
  <div class="text">100</div>
  <div class="text">500</div>
  <div class="text">1000</div>
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
</div>

References:

Upvotes: 0

cosinepenguin
cosinepenguin

Reputation: 1575

You can use the <figure> and <figcaption> tag:

#container {
  text-align: center;
}

.text {
  display: inline-block;
  margin: 0 20px 0 20px;
}

.img {
  margin: 0 20px 0 20px;
  width: 50px;
  height: 50px;
}

figure {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 0;
}
  <figure><figcaption>100</figcaption>
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
  </figure>
  <figure><figcaption>500</figcaption>
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
   </figure>
  <figure><figcaption>1000</figcaption>
  <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img">
    </figure>

This automatically centers the text. You'll have to play with the figure{} CSS to get the images properly aligned where you want them on your page.

Hope it helps!

Upvotes: 0

Miguel
Miguel

Reputation: 20633

Make text same width as image

.text {
  width: 50px;
}

JSFiddle Demo: https://jsfiddle.net/L3gcy3ek/1/

Upvotes: 1

Related Questions