jquery - 正确对齐/居中 bootstrap3 图像

Question

在 container-fluid 中，我有行示例，其中包含一些我想显示的数据，在我的文本之上，我将放置一个 img。这是当今网页的标准部分。

<div class="container-fluid">
  <!-- SOCIETE row of columns -->
  <div class="row SOC-columns">
    <div class="col-xs-12 col-sm-4">
        <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class=" img-rounded img-responsive" alt="Responsive image">
        <h4><strong>No Broker or Hidden Fees</strong></h4>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    </div>
    <div class="col-sm-4">
        <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg' class=" img-rounded img-responsive" alt="Responsive image">
        <h4><strong>Extremely Fast.</strong></h4>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
   </div>
    <div class="col-sm-4">
        <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg' class=" img-rounded img-responsive" alt="Responsive image">
        <h4><strong>Flexible Lease Terms</strong></h4>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
  </div>

  <hr>

  <div class="row SOC-columns">
    <div class=" col-xs-12 col-sm-4">
        <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class=" img-rounded img-responsive" alt="Responsive image">
        <h4><strong>Operations and Engeneering.</strong></h4>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    </div>
    <div class="col-sm-4">
        <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg' class=" img-rounded img-responsive" alt="Responsive image">
        <h4><strong>Networking.</strong></h4>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
   </div>
    <div class="col-sm-4">
        <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg' class=" img-rounded img-responsive" alt="Responsive image">
        <h4><strong>Safety.</strong></h4>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
  </div>

现在我的问题与 img 在我的 columns 中的定位有关。我想将图像居中，我用

来做到这一点

.SOC-columns img {
    padding-left: 220px;
}

在我的JSFIDDLE例如，它们是对齐的。我认为这不是我的情况或任何情况下的正确定位方式，我希望有人能向我解释正确的定位方式。

Answer 1

替换:

.SOC-columns img {
    padding-left: 220px;
}

与:

.SOC-columns img {
    margin-left: auto;
    margin-right: auto;
}