Html 在图像上方居中显示文本

我有一个问题：如何将文本居中放置在适当的图像上方

#容器{
文本对齐：居中；
}
.文本{
显示：内联块；
利润率：0.20px 0.20px；
}
.img{
利润率：0.20px 0.20px；
宽度：50px；
高度：50px；
}

100
500
1000

使文本与图像宽度相同

.text {
  width: 50px;
}

jsiddle演示：

您可以使用

和

标记：

#容器{
文本对齐：居中；
}
.文本{
显示：内联块；
利润率：0.20px 0.20px；
}
.img{
利润率：0.20px 0.20px；
宽度：50px；
高度：50px；
}
身材{
宽度：25%；
浮动：左；
保证金：0；
文本对齐：居中；
填充：0；
}

100
500
1000

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

---

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

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

#容器{
/*根据显示元素及其内容
要查看flexbox布局，请执行以下操作：*/
显示器：flex；
/*允许内容换行到新行：*/
柔性包装：包装；
/*对齐每个“行”的第一个和最后一个元素
到元素的左侧和右侧
并在落下的元素之间留出空间
在第一次和最后一次之间：*/
证明内容：之间的空间；
}
#容器div.text，
#集装箱img.img{
/*设置元素以使其自身对齐
到他们可用的“盒子”的中心：*/
自对准：居中；
文本对齐：居中；
宽度：30%；
}

100添加一些无关和无关的文本，以尝试并确保文本超出以下img的宽度。。。
500
1000

这就是我要做的：

.image {
    position:relative;
}

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

---

好的，谢谢，但是当图像小于文本时我该怎么办？你介意修改html吗？看起来你应该把图片和文字组合在一起……如果有用的话，别忘了接受答案！谢谢

.image {
    position:relative;
}

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