Javascript 如何在中间有文本和正确对齐的文本 项目 P> >我希望单词项在中间，箭头的图像在右边

它不清楚你最终的意思是什么，所以我为你做了两种可以帮助你解决问题的方法，因为我理解你的任务，屏幕截图的结果：

HTML:

---

我试过padding/maring:left，但它推了另一个词谢谢我在找item2部分。（项目和箭头在同一行）项目在中间，箭头在最右边

<p style="text-align: center;">Items <span style="padding-left: 50px;"><i id = 
"hi" class="arrow down"></i></span></p>

<div class="item"> 
    <span>
        Items
    </span>
    <i id = "hi" class="arrow down">---></i>
</div>
<p class="item2"> 
    <span>
        Items
    </span>
    <i id = "hi" class="arrow down">---></i>
</p>

.item {
position: relative;
background: black;
color: #fff;
width: 200px;
height: 200px;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.item .arrow {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.item2 {
position: relative;
background: black;
color: #fff;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.item2 .arrow {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}