Bootstrap 4中另一個圓內一個圓內的水平和垂直居中圖像

Question

我正在嘗試使用Bootstrap 4和CSS實現類似以下的功能：

到目前為止，我有這是CSS：

.inner-circle {
    display: block;
    height: 70px;
    width: 70px;
    line-height: 70px;

    -moz-border-radius: 50%; /* or 50% */
    border-radius: 50%; /* or 50% */

    background-color: #d2e4ff;
    text-align: center;
    font-size: 2em;
}

.outer-circle {
    display: block;
    height: 90px;
    width: 90px;
    line-height: 90px;

    -moz-border-radius: 50%; /* or 50% */
    border-radius: 50%; /* or 50% */

    background-color: #e7f1ff;
    text-align: center;
    font-size: 2em;
}

然后這個HTML：

<div class="container" style="margin-top: 50px;">
        <div class="row">
            <div class="col-sm-6">
                <div class="row" class="h-100">
                    <div class="col-sm-2 h-100">
                        <span class="outer-circle mx-auto my-auto">
                            <span class="inner-circle mx-auto my-auto">
                                <img src="images/breakfast.svg" height="40" width="40" />
                            </span>
                        </span>
                    </div>
                    <div class="col-sm-10 my-auto">
                        <h4 class="display5">Cool stuff</h4>
                    </div>
                </div>
            </div>
            <div class="col-sm-6"></div>
        </div>
    </div>

那讓我在這里：

這不是我想要的。 我一直試圖使圖像居中於內圓，然后使內圓居於外圓內，但一直沒有成功。 這是容易實現的事情嗎？還是我應該嘗試將整個圖像制作為圖像，然后僅插入該圖像？

Answer 1

您可以使用flex將垂直和水平對齊居中。

 .inner-circle { display: flex; align-items: center; justify-content: center; height: 70px; width: 70px; -moz-border-radius: 50%; border-radius: 50%; background-color: #d2e4ff; } .outer-circle { display: flex; align-items: center; justify-content: center; height: 90px; width: 90px; -moz-border-radius: 50%; border-radius: 50%; background-color: #e7f1ff; } 

 <div class="container" style="margin-top: 50px;"> <div class="row"> <div class="col-sm-6"> <div class="row" class="h-100"> <div class="col-sm-2 h-100"> <span class="outer-circle mx-auto my-auto"> <span class="inner-circle mx-auto my-auto"> A </span> </span> </div> <div class="col-sm-10 my-auto"> <h4 class="display5">Cool stuff</h4> </div> </div> </div> <div class="col-sm-6"></div> </div> </div> 

Answer 2

有很多方法可以做到這一點。 這對內部圓使用絕對定位。

 .inner-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; height: 70px; width: 70px; line-height: 70px; -moz-border-radius: 50%; /* or 50% */ border-radius: 50%; /* or 50% */ background-color: #d2e4ff; text-align: center; font-size: 2em; } .outer-circle { display: block; height: 90px; width: 90px; line-height: 90px; position: relative; -moz-border-radius: 50%; /* or 50% */ border-radius: 50%; /* or 50% */ background-color: #e7f1ff; text-align: center; font-size: 2em; } 

 <div class="container" style="margin-top: 50px;"> <div class="row"> <div class="col-sm-6"> <div class="row" class="h-100"> <div class="col-sm-2 h-100"> <span class="outer-circle mx-auto my-auto"> <span class="inner-circle mx-auto my-auto"> <img src="https://www.iconsdb.com/icons/preview/tropical-blue/stackoverflow-6-xxl.png" height="40" width="40" /> </span> </span> </div> <div class="col-sm-10 my-auto"> <h4 class="display5">Cool stuff</h4> </div> </div> </div> <div class="col-sm-6"></div> </div> </div>