Центрирование содержимого в div. Маржа 0, авто не работает. Также не отображается: inline

Question

Привет Я пытаюсь центрировать 4 изображения в div. Как видите, они застряли слева.

Я хотел бы, чтобы они были полностью оправданы центр, по крайней мере 5-10px края вокруг них (немного сдвинут вправо). Это только этот раздел, о котором я беспокоюсь ... не остальная часть HTML-сайта. Благодарю. Мой HTML является:

<section id="slide-6" class="homeSlide"> 
    <div class="bcg"> 
     <div class="hsContainer"> 
      <!-- <div class="hsContent">--> 


         <div class="img"> 
    <a target="_blank" href=""> 
    <img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280"> 
    </a> 
             </div> 

             <div class="img"> 
    <a target="_blank" href=""> 
    <img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280"> 
    </a> 
             </div> 

             <div class="img"> 
    <a target="_blank" href=""> 
    <img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280"> 
    </a> 
             </div> 

             <div class="img"> 
    <a target="_blank" href=""> 
    <img src="http://fieldtelecommunications.com/images/telecommunications_equipment.jpg" alt="Klematis" width="280" height="280"> 
    </a> 
             </div> 




           </div> 


</div> 
</div> 
</section> 

КСС:

#slide-6 .bcg { 
position: relative; 
background-color: #efefef; 
height:50%; 
} 
slide-6 .hsContent { 
     position: relative; 
} 
slide-6 .hscontainer { 

     width: 100%; 
     height: 100%; 
     display:inline; 
     overflow: hidden; 


     margin: 0 auto; position: relative; 
} 

div.img { 
    margin: 20px; 
    /*padding: 5px;*/ 
    /*border: 1px solid #0000ff;*/ 
    /*height: auto; 
    width: auto;*/ 
    /*float: left;*/ 
    display:inline; 


} 

Answer 1

добавить text-align: center к этому Div #slide-6

div.img { 
    display: inline-block; 
    margin: 20px; 
} 

и родительского DIV

text-align: center

Answer 2

Используя подвесную систему как 960gs сделает вашу жизнь проще. В противном случае вам нужно будет поместить изображения в контейнеры с шириной: 25%, 0 margin и 0 padding. Однако вы можете устанавливать поля и прокладки на содержимое контейнеров. ИЛИ сделайте фиксированную ширину hsContainer и дайте ей margin: auto;

Answer 3

Вашей обертке нуждается в width с margin:0 auto для того, чтобы внутреннее содержание быть выровнен центр.

section {margin:0 auto;width:1290px;} 

JsFiddleExample

Answer 4

Попробуйте display: inline-block: вместо только блок.

Answer 5

один способ просто инкапсулировать все, что в

<center></center> 

ЭРВО огурчик :)

https://jsfiddle.net/qcoavm5r/

Answer 6

Обеспечение выравнивания текста: центр родительского элемента 'hsContainer. Это свойство будет центрировать выравнивание элементов внутри него.