在同一行中的兩個文本一個對齊而另一個居中

Question

我有一個愚蠢的問題。 我想兩個文本留在同一行，但一個text-align: left;，另一個text-align: center;

怎樣做是正確的方法是什麼？

.number{ 
 
    text-transform:uppercase; 
 
    letter-spacing:1px; 
 
    text-align:left; 
 
    display:inline; 
 
    width: 50px; 
 
    margin-top:-10px; 
 
    float:left; 
 
    font-size:18px; 
 
} 
 

 
.menutitle{ 
 
    display:block; 
 
    text-transform:uppercase; 
 
    letter-spacing:1px; 
 
    text-align:center; 
 
    font-size:18px; 
 
    margin-bottom:31px; 
 
}

<span class="number">00</span><span class="menutitle">TEXT</span>

Answer 1

您可以Flexbox

.element { 
 
    display: flex; 
 
} 
 

 
.menutitle { 
 
    flex: 1; 
 
    text-align: center; 
 
    background: lightgreen; 
 
}

<div class="element"> 
 
    <span class="number">00</span> 
 
    <span class="menutitle">TEXT</span> 
 
</div>