Question

我试图将图像（x和y轴）集中在引导程序的容器中。当我在非响应式设计中工作时，我会使用这种方法：

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

它运行正常但我无法在引导程序中使用此方法，因为容器的高度不是恒定的。那么如何在引导程序中集中图像呢？

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;
}

在Bootstrap中集中图像

1 个答案: