Как отобразить контейнер, расположенный по центру, с содержимым, находящимся в крайнем левом и крайнем правом углу контейнера

Я хотел бы отобразить цену объекта на моем html-сайте. Вот как я хотел бы, чтобы это выглядело:

  1. Динамический
  2. Контейнер центрирован на странице с максимальной шириной 400px
    3. .
  3. Строка "цена" находится в крайнем левом углу, в то время как фактическая цена находится справа от центрированного содержимого

Вот как выглядит мой html:

<div class="price-container">
        <div class="price">price:</div>
        <div class="price-number">{{ event.price }}.00</div>
</div>

Вот как выглядит мой css: 

.price-container{
   font-family: Montserrat;
   text-transform: uppercase;
   color: white;
   font-weight: 700;
   font-size: 20px;
   width: 90%;
   max-width: 400px;
}

.price{
   float: left;
}

.price-number{
   float: right;
}

Если вы хотите отцентрировать его горизонтально, вам нужно добавить margin:auto. Я также очистил плавающие элементы для вас.

.price-container{
   font-family: Montserrat;
   text-transform: uppercase;
   color: black;
   font-weight: 700;
   font-size: 20px;
   width: 90%;
   max-width: 400px;
   margin: auto;
   border: 1px solid red;
}

.price{
   float: left;
}

.price-number{
   float: right;
}
<div class="price-container">
        <div class="price">price:</div>
        <div class="price-number">{{ event.price }}.00</div>
        <div style="clear:both"></div>
</div>

Мы также можем написать так:

<div class="price-container">
    <div class="price">price:</div>
    <div class="price-number">{{ event.price }}.00</div>
</div>

CSS:

.price-container{
   font-family: Montserrat;
   text-transform: uppercase;
   color: black;
   font-weight: 700;
   font-size: 20px;
   width: 90%;
   margin: 0 auto;
   max-width: 400px;
   border: 1px solid red;
   display: flex;
   justify-content: space-between;
}
Вернуться на верх