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

您可以使用<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 3

最简单也可能最安全的方法是打包img＆amp;一个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 4

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

参考文献：

Answer 5

这就是我要做的事情：

.image {
    position:relative;
}

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

图像上方的中心文字

5 个答案: