html - 将 DIV 中的两个字符串之一对齐以居中

Question

我希望写成“This text needs to be in middle”的文本位于中心。

您可以通过单击以下链接更详细地查看问题:

http://dabblet.com/gist/aadbfca153ec45c6633f

我试图用 <span> 解决它标签。

Answer 1

您可以使用 position: absolute; 来实现这一点。先将容器.option-header设置为position: relative;，然后将右边的文字设置为position: absolute;。然后你所要做的就是用 right: 0; 把它移到右边。您可以删除 float 。

请参阅以下代码段或您调整后的 dabblet .

.option-header{
    height: 76px;
    width: 591px;
    margin: 0 0 14px;
    font-size: 32px;
    /* padding-bottom: 8px; */
    padding: 1px 0px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: 600;
    padding: 20px 8px;
    height: auto;
    /* display: inline-block; */
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    /* transition: .4s; */
    font-family: 'Alegreya SC',serif;
    color: #fefefe;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    border: 2px solid #e2e2e2!important;
    background: #D85D1E;
    position: relative;
}

.najjeftinija{
    height: 39px;
    background: rgb(110, 165, 38);
    padding: 1px 0px;

}
.najjeftinija span{

    padding-right: 5px;
    font-size: 23px;
    padding-top: 5px;
    font-family: cursive;
}

.cijenadesno{
    position: absolute;
    right: 0;
}

<div class="option-header najjeftinija width-100"><span>This needs to be in middle </span><span class="cijenadesno">4.95 KM</span></div>