SVG 图标和 p 标签位于 div 内的同一行

Question

我希望图标位于文本的第一个字母旁边。 我尝试使用“margin; 0”来设置 p 标签的样式。然后这段代码就按预期工作了。不过，我想删除样式化的 P 标签，只在 div 上使用样式。我尝试过使用 flex-start 等。

从视觉上看，这就是我所追求的：

代码：

.wrapper {
  margin-bottom: 5px;
  background-color: gray;
  display: flex;
}

.icon {
  background-color: red;
  border-radius: 50%;
  height: 20px;
  scale: .8;
  width: 20px;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <div class="icon" />
  <p class="text">This is my div</p>
</div>

我应该如何进行？我不是来使用花车的...

Answer 1

SVG图标和文本之间的对齐问题可以使用Flexbox解决。我使用 W3Schools 的 SVG 代码来提供解决方案。方法如下：

垂直对齐项目： 使用align-items: center 在外部（类包装器）上以确保 SVG 图标和文本垂直对齐。

设置图标样式： 使用内联 SVG 定义感叹号并调整其大小和颜色。

添加间距： 向文本添加 padding-left 以在图标和文本之间创建一致的间距。

使用内联 SVG： 将 SVG 直接嵌入到 HTML 中可确保使用 CSS 精确控制其外观。

SVG代码（摘自W3schools供参考）

<div class="wrapper">
        <div class="icon">
            <!-- Inline SVG for the exclamation mark -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> 
                <circle cx="12" cy="12" r="10" fill="transparent"></circle>
                <path d="M12 8v4" stroke="white" stroke-width="2" stroke-linecap="round"></path>
                <circle cx="12" cy="16" r="1.5" fill="white"></circle>
            </svg>
        </div>
        <p class="text">This is my div</p>

Update the styles:
       .wrapper {
            margin-bottom: 5px;
            background-color: gray;
            display: flex;
            align-items: center; /* Align icon and text vertically */
        }
    
        .icon {
            background-color: red;
            border-radius: 50%;
            height: 20px;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .icon svg {
            fill: white; /* Set the SVG icon color */
            height: 14px; /* Adjust icon size */
            width: 12px;  /* Adjust icon size */
        }
    
        .text {
            margin: 0;
            padding-left: 8px; /* Add spacing between the icon and text */
        }

这个解决方案对我有用。您可以在 https://www.w3schools.com/graphics/svg_intro.asp 找到有关内联 SVG 的更多信息。`在此处输入代码`