将文本置于图像上方

Question

我有一个问题：如何将文本置于适当图像上方的中心？

#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>

我尝试了很多方法，但都没有得到好的效果。

它应该是什么样子：

Answer 1

使文本与图像宽度相同

.text {
  width: 50px;
}

JSFiddle 演示：https://jsfiddle.net/L3gcy3ek/1/

Answer 2

最简单也可能是最安全的方法是将图像和文本打包在一个 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>

和CSS：

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

这样您就可以根据需要浮动或定位您的 img/txt 组合。

Answer 3

您可以使用

<figure>

和

<figcaption>

标签：

#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>

这会自动将文本居中。您必须使用

figure{}

CSS 才能使图像在页面上正确对齐到您想要的位置。

希望有帮助！

Answer 4

现代浏览器中的一种方法是使用 CSS Flexbox 布局：

#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>

或者，也可以在现代浏览器中使用 CSS 网格布局：

#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>

参考资料：

• CSS Flexbox 兼容性。
• CSS 网格兼容性。

Answer 5

这就是我要做的:

.image {
    position:relative;
}

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

Answer 6

这用于在图像上方写入文字：

<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>