如何在 Bootstrap div 中创建一个居中的响应式 CSS 圆圈？

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 圆圈？

How to make a centered, responsive CSS circle within a Boostrap div?

html

css

geometry

twitter-bootstrap