【问题标题】:Can't get bootstrap vertical image alignment to work无法让引导垂直图像对齐工作
【发布时间】:2019-12-12 16:50:56
【问题描述】:

我目前正在开发一个网站,并且正在使用 bootstrap 3。我正在尝试做的是垂直对齐几个不同大小的图像。它们似乎与顶部对齐,但我想将它们居中。

这里有一张图片让你更好地理解:https://imgur.com/AZERxE4

我尝试过这样的事情:Center Image Vertically and Horizontally in Bootstrap Grid
这个:https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff
还有这个:https://mdbootstrap.com/docs/jquery/utilities/vertical-align/

但这些都不起作用。

最好的解决方案似乎是更新到 bootstrap 4,但我担心我会破坏我的整个网站......

【问题讨论】:

  • 如果你不想更新Bootstrap,那为什么不自定义css,你可以使用flex。
  • 请使用类名“align-middle”而不是“image-center”

标签: css twitter-bootstrap vertical-alignment


【解决方案1】:

鉴于我的评论,我发布了一个答案。

.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container img {
  margin: 5px;
}
<div class="image-container">
  <img src="https://via.placeholder.com/150X75">
  <img src="https://via.placeholder.com/150X100">
  <img src="https://via.placeholder.com/150X45">
</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-02-25
    • 2015-12-07
    • 1970-01-01
    • 1970-01-01
    • 2013-06-04
    • 1970-01-01
    • 1970-01-01
    • 2010-12-03
    相关资源
    最近更新 更多