我想让图标靠近圆框内的文本，但它出现在下面，这是我的代码。

HTML：

<代码><；DIV类名="；圆框"；>；<；DIV CLASSNAME="；DASHIMAGES"；>；<；IMG SRC={PDF}ALT="；PDF"；>；<；/IMG>；<；DIV类名称="；iContext"；>；PDF文件<；/DIV>；<；/DIV>；

CSS：

    <div className="RoundBox">
                               
        <div className="DashImages"><img src={PDF} alt="PDF"></img>
        <div className="IconText">PDF File</div>
                              
    </div>

顺晟科技：

你的HTML对图像标签无效，并且你缺少一个DIV.你会想先解决这个问题。

<div className="RoundBox">
                           
    <div className="DashImages"><img src={PDF} alt="PDF" /></div>
    <div className="IconText">PDF File</div>
                          
</div>

你有几个选择。这里有两个例子：

1. 您可以简单地将img { width: 3vw; height: 3vw; margin-left: 1vw; } .IconText { padding-left: 10px } .RoundBox { border-radius: 0.5vw; border: 1.5px solid grey; box-shadow: #e3eaf6; width: 20vw; height: 3vw; float: left; display: flex; align-items: center; } 添加到IMG CSS中。我可能建议使用类而不是针对所有<div className="DashImages"><img src={PDF} alt="PDF" /></div> 标记的选择器。例子

float: left

2. 您还可以使用img添加img { width: 3vw; height: 3vw; margin-left: 1vw; float: left; } 添加到flexbox类中。请注意，您可以使用不同的对齐属性来使用Flex定位元素。

<代码>.圆框{边界半径：0.5VW；边框：1.5px纯灰色；盒子阴影：#E3EAF6；宽度：20VW；高度：3VW；浮动：左；显示：Flex；}

这个应该可以解决问题。

DIV元素是块项，因此如果显示或宽度属性未更改或父项覆盖该行为，则它们将始终尝试填充整个水平空间（例如，使用Flexbox）

HTML

<代码><；DIV类名="；圆框"；>；<；DIV CLASSNAME="；DASHIMAGES"；>；<；IMG SRC={PDF}ALT="；PDF"；/>；<；/DIV>；<；DIV类名称="；iContext"；>；PDF文件<；/DIV>；<；/DIV>；

CSS

 img {
  width: 3vw;
  height: 3vw;
  margin-left: 1vw;
}

.IconText {
}

    .RoundBox {
  border-radius: 0.5vw;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
}