Reputation: 97
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
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
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
Reputation: 219
This is what I would do :
.image {
position:relative;
}
.text {
position:absolute;
text-align:center;
}
Upvotes: 0
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 <img> 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
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
Reputation: 20633
Make text same width as image
.text {
width: 50px;
}
JSFiddle Demo: https://jsfiddle.net/L3gcy3ek/1/
Upvotes: 1