Question

我希望将文本写成“此文本需要位于中间”位于中心。

您可以点击以下链接更详细地查看问题：

http://dabblet.com/gist/aadbfca153ec45c6633f

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

Answer 1

您可以使用position: absolute;来实现此目的。首先将容器.option-header设置为position: relative;，然后将右侧的文本设置为position: absolute;。然后你所要做的就是用right: 0;将它移到右边。你可以删除浮动。

请参阅以下代码段或经过调整的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>

Answer 2

只需将保证金从margin: 0 0 14px;更改为margin: auto;

完整代码

.option-header{
height: 76px;
width: 591px;     
margin: auto; /* <-- Change here */
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; 
}

将DIV中两个字符串中的一个对齐以使其居中

2 个答案: