Два текста в одной строке, один выровнен по левому краю, другой по центру

У меня глупая проблема. Я хочу, чтобы два текста оставались в одной строке, но один 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>


html css text-alignment css-float
person Federico    schedule 01.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это с помощью 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>

person Nenad Vracar    schedule 01.03.2016
comment
Спасибо, Ненад, я не знал об этой собственности. На моем сайте все еще есть пробел между номером и текстом: / - person Federico; 01.03.2016
comment
Это должен быть какой-то другой ваш CSS, который создает этот пробел. Возможно width: 50px; на .number jsfiddle.net/Lg0wyt9u/109 - person Nenad Vracar; 01.03.2016