Как сделать содержимое div по центру?

Question

[Secret73]

Всем привет. Приведу кусок разметки, подскажите каким образом можно сделать, что бы содержимое div`а .wrapper-about выравнивалось по середине не задавая ему конкретную ширину?
Не хочу задавать ему точную ширину, для того что бы при адаптивности обойтись без media Скажите есть какие то варианты?

<section class="siteSection">
<div class="mainColumn">
<article class="mainArticle">
    <h1><span class="title-about">Преимущества работы с нами</span></h1>
    <div class="wrapper-about">
      <div class="otp-about">
          <img class="image-about" src="img/1.png">
          <div class="text-about">Большой выбор</div>
       </div>
       <div class="otp-about">
           <img class="image-about" src="img/2.png">
            <div class="text-about">Оперативная доставка</div>
         </div>
    </div>
</article>
</div>
</section>

article {
    display: block;
}
.wrapper-about {
    overflow: hidden;
}
.otp-about {
    width: 190px;
    text-align: center;
    float: left;
    height: 150px;
}
.siteSection {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 1160px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

[Froggyweb]

Так например

https://codepen.io/anon/pen/ybNyPr

Comments

[Андрей Токмаков]

Идентичные решения :)

[Secret73]

Спасибо, а вот тут не подскажите как?

<div class="img-about">
                     <ul class="blocks">
    					<li><img src="img/zp3.png" alt=""></li>
    					<li><img src="img/zp3.png" alt=""></li>
   						<li><img src="img/zp3.png" alt=""></li>
    					<li><img src="img/zp3.png" alt=""></li>
    					<li><img src="img/zp3.png" alt=""></li>
    					<li><img src="img/zp3.png" alt=""></li>
					</ul>
					</div>

.blocks {
    overflow: hidden;
    padding-left: 0px;
}
.blocks li {
    float: left;
    list-style-type: none;
    max-width: 350px;
}
ul.blocks img {
    width: 100%;
    max-width: 100%;
}

Answer 2

[Андрей Токмаков]

https://jsfiddle.net/xNPC/8xv3wgtz/
Так?

Comments

[Secret73]

Спасибо, а вот тут не подскажите как?

<div class="img-about">
                     <ul class="blocks">
    					<li><img src="img/zp3.png" alt=""></li>
    					<li><img src="img/zp3.png" alt=""></li>
   						<li><img src="img/zp3.png" alt=""></li>
    					<li><img src="img/zp3.png" alt=""></li>
    					<li><img src="img/zp3.png" alt=""></li>
    					<li><img src="img/zp3.png" alt=""></li>
					</ul>
					</div>

.blocks {
    overflow: hidden;
    padding-left: 0px;
}
.blocks li {
    float: left;
    list-style-type: none;
    max-width: 350px;
}
ul.blocks img {
    width: 100%;
    max-width: 100%;
}

[Андрей Токмаков]

Secret73: не суйте float: left куда попало, для выстраивания блоков в линию есть display: inline-block и ставьте родительскому блоку выравнивание по центру и всего делов

[Secret73]

Андрей Токмаков: учту, спасибо