Question

我希望在小型设备中将文本和图像对齐在中心。我试图使用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;
}

这是我得到的：

这是我想要实现的目标：

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

Answer 1

最外层div中的样式为text-align:center

<div class="col-md-3 col-sm-4 col-xs-12 " style="padding-bottom:20px;text-align:center">
 <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;
}

如果您需要任何进一步的帮助，请告诉我

Answer 2

它可以帮到你

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

}

</style>
<div class="col-md-3 col-sm-4 col-xs-12 " style="padding-bottom:20px; ">
<div class =class="text-responsive">
<p style="height:125px; font-size: 14.4px; position: relative" class="text- responsive" >
  <span style=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>
<p class="text-responsive">
<img style="max-height: 310px;" class="img-responsive"   src="http://via.placeholder.com/310x310"/>

Answer 3

只需在图片中添加以下样式：

.img-responsive {
   margin-left: auto;
   margin-right: auto;
}

Answer 4

感谢@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>

Answer 5

你好，你需要把div中的div的所有元素放在中心。所以你需要把：课程中的text-center

   <div class="col-md-12 text-center" style="padding-bottom:20px; ">
   <p style="height:125px; font-size: 14.4px; " >
      <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;"  src="http://via.placeholder.com/310x310"/>

</div>

然后创建一个css文件，这样你就可以根据自己的需要编写样式。

Bootstrap Div，文本和图像（对齐）位于中心

5 个答案: