Block alignment problem

Question

I can not align the block in the center relative to the others. Here is a piece of code. Or if in brief: There is one display: block, there are 2 inline-block blocks in it and 3 need to be pressed to the right edge of the parent, but so that it is vertically centered relative to the others. How to do it?

I do here http://ravlex.pluton-host.ru/polar/cart.html

.formdostavka input[type=radio] + .descdostavka:before { content: "\f07a"; font-family: FontAwesome; display: inline-block; color: #fff; font-size: 24px; background-color: #0e62bd; border-radius: 5px; padding: 13px 40px; margin-right: 15px; vertical-align: middle; } .descdostavka { font-family: "MuseoSansCyrl-500"; font-size: 15px; } .boxdost { display: inline-block; vertical-align: middle; max-width: 630px; } .boxprice { display: inline-block; float: right; }

 <div class="descdostavka"> <div class="boxdost"> <span class="titledostavka">Доставка заказа стоимостью до 15000 руб.</span> <span class="descrdostavka">Стоимость доставки по Московской области, а так же доставки по Москве в пределах МКАД заказов до 15 тысяч рублей - уточняйте дополнительно у наших менеджеров.</span> </div> <div class="boxprice"> <span>Стоимость: 0 руб.</span> </div> </div>

Flex will help align vertically, but press it to the right edge then fail.

Accepted Answer · 2016-08-12T15:02:32

 .wrapper { display: flex; align-items: center; justify-content: space-between; } .left, .middle, .right { display: inline-block; height: 100%; } .left { background-color: blue; flex: 0 0 60px; width: 60px; height: 45px; border-radius: 10%; margin-right: 1em; } .middle { flex: 10 1; margin-right: 1em; } .right { background-color: lightgrey; flex: 1 0; white-space: nowrap; }

 <div class="wrapper"> <div class="left"> </div> <div class="middle"> Доставка заказа стоимостью до 15000 руб. <br>Стоимость доставки по Московской области - уточняйте дополнительно у наших менеджеров. </div> <div class="right"> Стоимость: 0 руб. </div> </div>

I hope TC has a head on the spot, he will figure out what's what and why he writes himself the correct css.
But the bootstrap with flex can be modded using media queries, by about 700px we change the display from flex to block and that's it.

Ivan Karaman Ivan Karaman 176 6 · Answer 2 · 2016-08-12T15:09:50

 .formdostavka input[type=radio] + .descdostavka:before { content: "\f07a"; font-family: FontAwesome; display: inline-block; color: #fff; font-size: 24px; background-color: #0e62bd; border-radius: 5px; padding: 13px 40px; margin-right: 15px; vertical-align: middle; } .descdostavka { font-family: "MuseoSansCyrl-500"; font-size: 15px; max-width 960px; } .boxdost { display: inline-block; vertical-align: middle; margin: 20px 0; } .boxdost > span{ float: left; max-width: 630px; min-width: 630px; display: block; } .boxprice { display: inline-block; width: calc(100% - 630px); float: right; }

 <div class="descdostavka"> <div class="boxdost"> <span class="titledostavka">Доставка заказа стоимостью до 15000 руб.</span> <span class="descrdostavka">Стоимость доставки по Московской области, а так же доставки по Москве в пределах МКАД заказов до 15 тысяч рублей - уточняйте дополнительно у наших менеджеров.</span> <div class="boxprice"> <span>Стоимость: 0 руб.</span> </div> </div> <div class="boxdost"> <span class="titledostavka">Доставка заказа стоимостью до 15000 руб.</span> <span class="descrdostavka">Стоимость доставки по Московской области, а так же доставки по Москве в пределах МКАД заказов до 15 тысяч рублей - уточняйте дополнительно у наших менеджеров.</span> <div class="boxprice"> <span>Стоимость: 0 руб.</span> </div> </div> <div class="boxdost"> <span class="titledostavka">Доставка заказа стоимостью до 15000 руб.</span> <span class="descrdostavka">Стоимость доставки по Московской области, а так же доставки по Москве в пределах МКАД заказов до 15 тысяч рублей - уточняйте дополнительно у наших менеджеров.</span> <div class="boxprice"> <span>Стоимость: 0 руб.</span> </div> </div> </div>

Block alignment problem

2 answers 2

More articles: