Выравнивание элементов не работает должным образом

Question

Мне нужна небольшая помощь. У меня есть некоторые изображения, созданные ниже. Вы можете увидеть мой код здесь

codepen.io/anon/pen/WoEXZN

Но я не получаю выход, как и ожидалось.

Reference Design

Answer 1

Вы можете использовать CSS Flexbox. И включите свойства выравнивания гибкости в родительский элемент.

Так же, как:

.wedding-img { 
    display: flex; /* Flex Container */ 
    flex-wrap: wrap; /* Wrapping Hexagons to next line after a certain width limit is reached */ 
    justify-content: center; /* Center aligning hexagons horizontally */ 
    align-items: center; /* Center aligning hexagons vertically */ 
} 

Посмотрите фрагмент кода ниже (используйте весь экран, чтобы просмотреть его правильно):

.wedding-img { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin-top: 103px; 
 
} 
 

 
.hexagon { 
 
    overflow: hidden; 
 
    visibility: hidden; 
 
    width: 260px; 
 
    height: 314px; 
 
    margin: -60px 0 0 0px; 
 
    -webkit-transform: rotate(120deg); 
 
    transform: rotate(120deg); 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    margin: 1em; 
 
    margin-top: -103px; 
 
} 
 
.hexagon-in1 { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transform: rotate(-60deg); 
 
    transform: rotate(-60deg); 
 
} 
 
.hexagon-in2 { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0px 12px; 
 
    text-align: center; 
 
    background-repeat: no-repeat; 
 
    background: #f1f4f5; 
 
    visibility: visible; 
 
    -webkit-transform: rotate(-60deg); 
 
    transform: rotate(-60deg); 
 
    display: table; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="wedding-img"> 
 
    <div class="hexagon"> 
 
    <div class="hexagon-in1"> 
 
     <div class="hexagon-in2 groom"></div> 
 
    </div> 
 
    </div> 
 
    <div class="hexagon"> 
 
    <div class="hexagon-in1"> 
 
     <div class="hexagon-in2 groom"></div> 
 
    </div> 
 
    </div> 
 
    <div class="hexagon"> 
 
    <div class="hexagon-in1"> 
 
     <div class="hexagon-in2 groom"></div> 
 
    </div> 
 
    </div> 
 
    <div class="hexagon"> 
 
    <div class="hexagon-in1"> 
 
     <div class="hexagon-in2 groom"></div> 
 
    </div> 
 
    </div> 
 
    <div class="hexagon"> 
 
    <div class="hexagon-in1"> 
 
     <div class="hexagon-in2 groom"></div> 
 
    </div> 
 
    </div> 
 
    <div class="hexagon"> 
 
    <div class="hexagon-in1"> 
 
     <div class="hexagon-in2 groom"></div> 
 
    </div> 
 
    </div> 
 
    <div class="hexagon"> 
 
    <div class="hexagon-in1"> 
 
     <div class="hexagon-in2 groom"></div> 
 
    </div> 
 
    </div> 
 
</div>

Надеется, что это помогает!