如何在靶心旁边对齐文本答案

【问题标题】：How to align text next to bullseye如何在靶心旁边对齐文本
【发布时间】：2020-06-05 17:52:25
【问题描述】：

我使用 CSS 创建了一个靶心徽标，并希望在徽标旁边放置一个对齐的文本。

#logo{
    width:25px;
    height:25px;
    border-radius:50%;
    background-color:red;
    background-clip:content-box;
    padding:5px;
    border:5px solid red;
    color:red;
}

&lt;div id="logo" style="float:left;"&gt;&lt;b &gt;&lt;span style="margin-left: 20px;p-bottom: -50px;"&gt; text123&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;

【问题讨论】：

不要在徽标上使用浮动。其次，如果此文本应与徽标一起定位，您可以使#logo div 位置：相对，文本位置：绝对，所以如果徽标移动，文本也会移动
或者你可以简单地扩展 span 的左边距。

标签： html css styles alignment

【解决方案1】：

你可以使用flexbox:

#container {
  display: flex;
  align-items: center
}

#logo{
    width:25px;
    height:25px;
    border-radius:50%;
    background-color:red;
    background-clip:content-box;
    padding:5px;
    border:5px solid red;
    color:red;
}

#text {
  color: black;
  padding-left: 12px
}

<div id="container">
  <div id="logo"></div>
  <div id="text">text123</div>
</div>

【讨论】：

我希望文字出现在徽标旁边。