同一行中的两个文本对齐，另一个居中

Question

我有一个愚蠢的问题。 我希望两个文本保持在同一行，但一个text-align: left;而另一个text-align: center;

这样做的正确方法是什么？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用Flexbox

执行此操作

＆＃13;

＆＃13;

.element {
  display: flex;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;