Как выровнить два блока span с плавающей шириной по центру блока div?

Question

Прошу помочь в выравнивании двух блоков по центру другого блока. Особенность состоит в том, что: 1) первый блок имеет ширину 65px (корзина), 2) второй блок может быть от 30px до 100px. (стоимость товаров в корзине). Поскольку она может отображаться как: 0 руб, так и например 199 000 руб. И требуется, чтобы в обоих случаях корзина как с нулевой так и с любой суммой вставали строго по центру. Как это сделать через CSS ???

<div class="header_cart_js">
    <div class="header_cart">
        <div class="header_cart_content">
            <a href="">
                <span class="cart">
                      <svg></svg>
                <span class="cart_bage">0</span>
                 </span>
                 <span class="cart_price">0 р</span>
            </a>                    
        </div>
    </div>
</div>

Сейчас CSS-стили имеют такой вид:

.header_cart_js{
    width:100%;
    height:50%;
    position:relative;
}
.header_cart,
.header_cart_content,
.header_cart_content a{
    color:#000;
    width:170px;
    height:45px;
}
.cart{
    width:65px;
    height:45px;
    position:absolute;
}
.cart_price{
    color:green;
    margin-left:70px;
    min-width:30px;
    height:45px;
    position:absolute;
}
.header_cart_content svg{
    width:35px;
    height:35px;
    display:block;
}

Answer 1

В итоге получились такие стили. И работает в ie10+

.header_cart_js{
    width:100%;
    height:50%;
    position:relative;
}
.header_cart,
.header_cart_content,
.header_cart_content a{
    color:#3d3d3d;
    width:170px;
    height:45px;
    display:flex;
    justify-content:center;
}
.cart,
.cart_price{
    height:45px;
    display:block;
    position:relative;
}
.cart{
    width:65px;
}
.cart_price{
    color:#65b800;
    min-width:30px;
    font-size:20px;
    font-weight:700;
    line-height:50px;
}
.header_cart_content svg{
    width:35px;
    height:35px;
}

БЛОГ НА HUSL

Как выровнить два блока span с плавающей шириной по центру блока div?

Ответы (1 шт):