Центр комбинированные divs

Question

EDIT: Все отсортировано сейчас. Спасибо всем, кто помог! :)

У меня возникли проблемы с центрированием элемента моего сайта. Это 3 divs, смешанные вместе, чтобы сформировать шестиугольник.

Я не могу его сосредоточить.

HTML:

<li> 
    <div class="centerhex"> 
     <a href="#"> 
      <div class="hexa"> 
      <div class="hexcontainer"> 
       <div class="vertical-align"> 
       <span class="hextext">Lorem Ipsum Dolor</span> 
       </div> 
      </div> 
      </div> 
     </a> 
    </div> 
</li> 

CSS:

.centerhex { 
left: 50%; 
margin: 0 auto; 
width:210px; 
height:300px; 
} 

.hexa { 
width: 100%; 
min-width: 200px; 
height: 0; 
padding-bottom: 57.7%; 
margin-top: 65px; 
background-color: #4a4a4a; 
/*position: absolute;*/ 
color: #ffffff; 
font-family: 'Oswald', sans-serif; 
font-size: 18px; 
border-radius: 4%/20%; 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-ms-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
} 

.hexa::before, 
.hexa::after { 
content:""; 
display: block; 
width: inherit; 
height: inherit; 
padding: inherit; 
background: inherit; 
z-index: 0; 
position: absolute; 
border-radius: inherit; 
-moz-transform:rotate(60deg); 
-webkit-transform:rotate(60deg); 
-o-transform:rotate(60deg); 
-ms-transform:rotate(60deg); 
} 

.hexa::after { 
-moz-transform:rotate(-60deg); 
-webkit-transform:rotate(-60deg); 
-o-transform:rotate(-60deg); 
-ms-transform:rotate(-60deg); 
} 

.hexcontainer { 
position: absolute; 
left: 0; 
top: 0; 
height: 100%; 
width: 100%; 
z-index: 10; 
} 


.vertical-align { 
display: table; 
height: 100%; 
width: 100%; 
} 

Кроме того, мне нужна помощь, так что нижняя часть формы не срезается. URL: http://jackmarshallphotography.co.uk/V1/donate.html

Answer 1

Есть несколько вещей, чтобы изменить в вашем CSS, я работал непосредственно на вашем сайте с помощью инструмента разработчика Chrome, пожалуйста, найти ниже CSS для центрирования «метки»:

.servicebox { 
position: absolute; 
margin-top: -77px; 
width: 100%; 
} 

.servicebox ul { 
list-style: none; 
width: 100%; 
text-align: center; 
} 

.servicebox ul li { 
margin-left: 12px; 
} 

.centerhex { 
margin: auto; 
width: 210px; 
height: 300px; 
} 

Надежда помогает.

Для второго выпуска:

вам нужно отредактировать файл hexagon.css и изменить Верхнее поле свойство найти правильное значение: -65px или больше (строка 47)

Йоанн

Answer 2

Позвольте мне посмотреть, могу ли я помочь вам с простым примером.

Имейте скрипку - fiddle link!

Редактировать! - Вот еще скрипку без абсолютного позиционирования ... кажется, что это может быть достигнуто без него - fiddle link - no absolute positioning

Absolute пример позиционирования:

HTML

<div id="parentOfCentered"> 
    <div id="perfectlyCentered"></div> 
</div> 

CSS

#parentOfCentered { 
    position: relative; /* Absolutely positioned children will be positioned in relation to the parent div */ 
    background: #CCC; 
    width: 400px; 
    height: 400px; 
} 
#perfectlyCentered { 
    width: 200px; 
    height: 200px; 
    background: #000; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin: -100px 0 0 -100px; 
    /* 
     - negative top margin of half the height 
     - negative left margin of half the width 
    */ 
}