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

Question

[Cal_Lightman]

Здравствуйте.
Прошу помочь в выравнивании двух блоков по центру другого блока.
Особенность состоит в том, что:
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

[Егор Живагин]

.header_cart,
.header_cart_content,
.header_cart_content a{
  color:#000;
  width:170px;
  height:45px;
  display: flex;
  justify-content: center;
}

А вообще, гуглите, про выравнивание через css миллионы статей написано, кажется) И учите flexbox

Comments

[Cal_Lightman]

А можно ли как то реализовать для поддержки от IE10 ?
В IE11 всё нормально.

Попробовал:

display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;

Но находит друг на друга.

[Cal_Lightman]

Нашел. Добавил span display:block;

В итоге стили CSS так:

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

[Егор Живагин]

Cal_Lightman, ух ты, давно не видел требования поддержки ie10 . Лет 5 уже :) Даже от ie11 все вроде стремятся отказываться

[Cal_Lightman]

Егор Живагин, хочется сделать лучше... только толку от этого. Я себе пытаюсь сделать верстку... А потом уже придется заказывать дальше... у кого-то...

[Егор Живагин]

Cal_Lightman, ну, если делаете себе, то имеет смысл отказаться от поддержки ie - как показывает практика, даже если процент пользователей с ним может быть значительным (обычно 1-5%), то эти пользователи не совершают целевых действий, то есть не конвертируются в деньги) Но дело ваше, конечно