圆形圆圈上的SVG图标并排另一个div，Bootstrap 4.5答案

【问题标题】：SVG icons on a round circle side by side another div, Bootstrap 4.5圆形圆圈上的SVG图标并排另一个div，Bootstrap 4.5
【发布时间】：2020-07-09 01:48:33
【问题描述】：

我开始使用 Bootstrap 4.5 和 SVG 来制作图标。我很难理解它是如何工作的。我现在想将 SVG 放在一个形状（圆角）内。但希望该形状与另一个 div 并排。我无法移动 div 将它们放在同一行。下面是一段代码sn-p。

.svg-icon {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 14px);
}

.poll-icon-container {
  height: 50px;
  width: 50px;
  position: relative;
  border-radius: 50%;
  background-color: pink;
}

<div class="rounded-circle poll-icon-container text-success">
  <svg
    width="2em"
    height="2em"
    viewBox="0 0 18 18"
    class="bi bi-box-arrow-in-up-right svg-icon"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
    />
    <path
      fill-rule="evenodd"
      d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
    />
    <path
      fill-rule="evenodd"
      d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
    />
  </svg>
</div>
<div>
  should be on the right side of the icon 
</div>

【问题讨论】：

div{display:inline-block}? body{display:flex}?

标签： html css twitter-bootstrap svg bootstrap-4

【解决方案1】：

只要您使用 Bootstrap，让我们将这 2 个 divs 覆盖在一个父级 div 中，并将它们设为 display flax in bootstrap way

d-flex - BS 类阻止display: flex;

justify-content-start - BS 类制作justify-content: flex-start;

align-items-center - 制作align-items: center;的BS类

ml-3 - BS sizing 类，margin-left: 1rem;

.svg-icon {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 14px);
}

.poll-icon-container {
  height: 50px;
  width: 50px;
  position: relative;
  border-radius: 50%;
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="d-flex justify-content-start align-items-center">
  <div class="rounded-circle poll-icon-container text-success">
    <svg width="2em" height="2em" viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path
      fill-rule="evenodd"
      d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
    />
    <path
      fill-rule="evenodd"
      d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
    />
    <path
      fill-rule="evenodd"
      d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
    />
  </svg>
  </div>
  <div class="ml-3">
    should be on the right side of the icon
  </div>
</div>

【讨论】：

这行得通。谢谢你！我对 flexbox 有点陌生。我得调查一下。

【解决方案2】：

用position: absolute;在sn-p下面检查。

.svg-icon {
  display: block;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 14px);
}
.poll-icon-container {
  height: 50px;
  width: 50px;
  position: relative;
  border-radius: 50%;
  background-color: pink;
}

<div class="rounded-circle poll-icon-container text-success"   style="display:inline-block;">
                <svg
                  width="2em"
                  height="2em"
                  viewBox="0 0 18 18"
                  class="bi bi-box-arrow-in-up-right svg-icon"
                  fill="currentColor"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
                  />
                </svg>
              </div>
              <div style="display: inline-block; margin-left:10px;line-height: 50px; position: absolute;">
                should be on the right side of the icon 
              </div>

【讨论】：