使用引導程序對圖像進行居中

我試圖使用boostrap的fluid-container,img-responsive和center-block（和margin: 0 auto; CSS）將圖像居中，但我迄今尚未成功。使用引導程序對圖像進行居中

我想實現的代碼如下：

<div class='container-fluid'> 
<div class='row'> 
    <img src="https://www.cartacapital.com.br/mais-admiradas/o-colecionador-de- 
    empresas-5838.html/paulo-lemann/@@images/4dd0c0a1-9ae4-4fd2-8724- 
    e59867bb14c1.jpeg" alt="Jorge Paulo Lemann" class="img-responsive center-block"> 
</div> 
</div>

不過，這並不居中的圖像。任何幫助？

謝謝！

編輯：我正在使用codepen：https://codepen.io/diegomengue/pen/WOwJYP。有沒有可能性codepen搞砸了什麼？

來源

2017-06-13 Diego Mengue

w ^一旦屏幕比圖像更寬，我就可以使用它。 –

您在筆中加載了引導程序4，.center-block是引導程序3功能。改爲將引導程序3添加到筆中。 https://codepen.io/mcoker/pen/qjaBNK

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
<div class='container-fluid'> 
 
    
 
    <div class='row'> 
 
    
 
    <img src="https://www.cartacapital.com.br/mais-admiradas/o-colecionador-de-empresas-5838.html/paulo-lemann/@@images/4dd0c0a1-9ae4-4fd2-8724-e59867bb14c1.jpeg" alt="Jorge Paulo Lemann" class="img-responsive center-block" > 
 
    </div> 
 
</div> 
 
</body>

來源

2017-06-13 22:32:39

非常感謝！ –

@DiegoMengue不用客氣。 –

由於row有display: flex在這裏，你可以添加

.row { 
    justify-content: center; 
}

居中圖像

https://codepen.io/anon/pen/EXgxgo

來源

2017-06-13 22:35:46 Johannes

使用引導程序對圖像進行居中

回答

相關問題