时间戳

首页 > 解决方案 > 我怎样才能在中间有一个文本并且文本是右对齐的

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

问题描述

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

所以我希望词项在中间，向下箭头的图像在右边

标签： javascripthtmlcss

解决方案

在此处输入图像描述最终不清楚你的观点是什么，所以我为你做了两种可以帮助你解决问题的方法，因为我理解你的任务，截图结果：

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

推荐阅读