我正在尝试使用 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>
但它不会使图像居中。有帮助吗？
谢谢!
编辑:我正在使用代码笔:https://codepen.io/diegomengue/pen/WOwJYP .有没有可能 codepen 搞砸了？
最佳答案
您在笔中加载了 bootstrap 4，.center-block 是 bootstrap 3 的一个特性。改为将 bootstrap 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>关于html - 使用 bootstrap 将图像居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44532507/