css - 在 Bootstrap 中集中图像

Question

我正在尝试将图像(x 轴和 y 轴)集中在 Bootstrap 的容器中。当我在非响应式设计中工作时，我只会使用这种方法:

.container{display:table-cell; vertical-align:middle; text-align:center; width:500px; height:300px;}
.container img{display:block; margin:auto;}

它工作正常，但我不能在 bootstrap 中使用这个方法，因为容器的高度不是恒定的。那么如何在 bootstrap 中集中图像？

Answer 1

当您想要居中的对象和/或容器的高度未知时，您可以使用来自 csstrick 的技巧。 .总之，我们引入一个伪元素如下:

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}