Question

请参阅下面的JSfiddle：

https://jsfiddle.net/jamesdd9302/mpocy8vo/

我有3个并排的步骤，因此是父<div class="col-xs-4">。每一步都应该看起来像一个干净的圆圈（我试图通过内部div放置来实现），里面有一个数字。

Answer 1

由于您的宽度未知（100％），您将需要使用填充百分比设置高度，因为百分比填充是根据宽度计算的。

.circle {
  background: #515151;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: max;
  text-align: center;
  color: white;
  width: 100%;
  padding-bottom:100%;
  height:0;
  position:relative;
}
.circle-caption {
  display: block;
  left: 0;
  height: 1em;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -.5em;
}

<div class="circle" id="step-1-default-image-box">
    <span class="circle-caption">1</span>
</div>

垂直居中变得棘手，所以你必须在你可以绝对定位的文本周围添加另一个包装器。

其他人刚刚添加了这样的答案并删除了它，但我认为这是最好的方法。

如何在Bootstrap div中创建一个居中，响应迅速的CSS圈？

1 个答案: