html - 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>