Question

我正在尝试使用以下代码使标题显示在图像下方：

<div style="float:left;width:100px;" class="dataview">
   <div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
      <img src="{src}" class="icon" />
      <div style="width:100px;text-align:center;">{text}</div>
   </div>
</div>

但是，最终结果是文本确实居中，但将文本的开头放在div的中心，从而使文本显示在右侧。

我该如何防止这种情况？

Answer 1

您可以移除包含该文字的div的margin:18px和width:100px，因为其父div已经有width:100px：

<div style="float:left;width:100px;" class="dataview">
   <div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
      <img src="{src}" class="icon" />
   <div style="text-align:center;">{text}</div>
</div>

Answer 2

由于您需要将标题中心保留在图像中，因此包含文本的div的宽度应与img具有相同的宽度。并使文本中心将属性align='center'应用于div本身而不是给css text-align:center

<img src="{src}" class="icon" />
<div align="center" style="width:width of image;">{text}</div>

这将解决您的问题

CSS text-align属性不考虑文本本身的宽度

2 个答案: