正確對齊/中心bootstrap3圖像

在container-fluid我有我想要顯示的一些數據的行示例，我的文字上面我會把img。這是這幾天網頁的標準部分。正確對齊/中心bootstrap3圖像

<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>

現在我的問題是有關內部礦山columnsimg定位。我想center圖像，我做了與

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

礦山例如

，和它們對齊。我認爲這不是在我的案例或任何情況下的正確定位方式，我希望有人能向我解釋這樣做的正確方法。

來源

2016-02-12 PetarP

'margin：0 auto; '到'.SOC-columns img'是最好的選擇，因爲你對圖像應用了'img-responsive'，它被稱爲'display：block;'和'width：100％'。否則'文本對齊：中心'會做的伎倆。 – DebRaj

更換：

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

有：

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

來源

2016-02-12 21:47:14

好的，所以這是在'column'裏面調整'img'的正確方法，還有更多嗎？ – PetarP

這就是它的程度。它不是非常合適的，但它被廣泛接受爲將元素居中放置在父元素內部的最簡單和最可靠的方法。 –

這似乎是合法的，我希望有人能詳細說明這個問題，會接受你的回答。 – PetarP

根據.SOC-columns有text-align: center屬性，你可以添加一個display: inline屬性圖像。

.SOC-columns { 
    text-align: center; 
} 

.SOC-columns img { 
    display: inline; 
}

來源

2016-02-12 22:20:43 smdsgn

正確對齊/中心bootstrap3圖像

回答

相關問題