Bootstrap Div，文本和图像（对齐）居中

Winona 发表于 Dev

薇诺娜

当它在小型设备中时，我想在中心对齐文本和图像。我尝试使用 text-align: center，但文本没有与图像对齐。这是我的代码：

<div class="col-md-3 col-sm-4 col-xs-12 " style="padding-bottom:20px; ">
   <p style="height:125px; font-size: 14.4px; position: relative" class="text-responsive">
      <span style="position: absolute;top: 0;">
         <b>a long name goes here</b> <br> <br>
      </span>
      <span style="position: absolute;bottom: 0;">
      <span class="icon-clock"></span><small>8:00</small> <br>
      <span class="icon-location"></span><small>Singapore</small>
      </span>
   </p>
   <img style="max-height: 310px;" class="img-responsive" src="http://via.placeholder.com/310x310"/>
</div>

.text-responsive {
   text-align: center;
   display: block;
   max-width: 100%;
   height: auto;
}

这是我得到的：

这是我想要实现的目标：

我真的很感激一些帮助！谢谢大家！

薇诺娜

感谢@Amaan 的建议，我已经用 div 替换了 span，并且它有效！这是代码，如果它可以帮助任何人！

<div class="col-md-3 col-sm-4 col-xs-12 bg" style="padding-bottom:20px;">
   <div style="font-size: 14.4px; max-width: 180px; height:125px; position:relative;" class="img-responsive">
      <div style="position: absolute;top: 0;">
         <b>a long name goes here</b>
      </div>
      <div style="text-align: left;position: absolute; bottom:0;">
         <div class="icon-clock"><small>8:00</small></div>
         <div class="icon-location"><small>Singapore</small></div>
      </div>
   </div>
   <img style="max-height: 310px;" class="img-responsive" src="http://via.placeholder.com/310x310"/>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。