以下のJSfiddleを参照してください。
https://jsfiddle.net/jamesdd9302/mpocy8vo/
私は3つのステップを並べているので、親<div class="col-xs-4">です。各ステップは、中央にあるきれいな円のように見えるはずです（これは、内側のdiv配置で達成しようとしています）。その中に数字があります。
幅が不明（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>
これでは垂直方向の中央揃えが難しくなるため、絶対に配置できるテキストの周りに別のラッパーを追加する必要があります。
他の誰かがこのような答えを追加して削除しただけですが、これが最善の方法だと思います。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加