css - 如何在 Bootstrap 中将图像居中?

标签 css html twitter-bootstrap carousel bootstrap-4

我试图在 Bootstrap 4 Alpha 6 的轮播中水平居中放置图像。

它似乎在我尝试过的任何方式下都不起作用,包括使用 center-block

这是我到目前为止尝试过的:http://codepen.io/anon/pen/wJdjQg?editors=1100

有什么提示吗?

最佳答案

center-block 在 Bootstrap 4 中被 mx-auto 取代。mx-auto 表示自动 x 轴边距(margin=左:自动;右边距:自动)所以它 可用于居中 display:blockdisplay:flex 元素。

<div class="carousel-item active">
          <img class="img-fluid mx-auto" src="https://unsplash.it/200/200" alt="First slide">
</div>

More on Centering in Bootstrap 4

关于css - 如何在 Bootstrap 中将图像居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42744803/

相关文章:

css - 100% 高度 div 不是 100%

css - Chrome Webkit 的媒体屏幕查询

php - LESS.php - 它在哪里保存编译后的文件?

javascript - 获取页面片段时在 Bootstrap 模式中加载脚本

javascript - 使用JQuery/JS将多个AJAX响应附加到单个卡中

javascript - 在网页中创建交互式 map

javascript - 如何增加斜体文字的 Angular ?

javascript - 如何触发点击事件以在谷歌地图绘图管理器功能中选择每个图?

javascript - AJAX:如何在单击按钮时更改客户端和服务器端的值?

javascript - jQuery 下拉列表不触发删除按钮