我怎样才能在中间有一个文本并且文本是右对齐的

Question

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

so I want the word item to be in the middle of and the image of arrow down to be in the right

Answer 1

Its not quiet clear what is your point eventually, so I made for you two ways that can help you to solve problems, as I understood your task, result on screenshot:

HTML:

<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>

CSS:

.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%);
}