Центр css chevron в div

Question

Я основал this chevron с некоторого кода от here и изменил его, чтобы использовать его в качестве навигации в карусели. Тем не менее, я изо всех сил стараюсь сосредоточить его в серой зоне. Предпочтительно он будет центрироваться горизонтально с небольшим отступом к краям.

Я попытался обернуть шеврон в другом div, но без успеха.

.chevron { 
 
    position: absolute; 
 
    text-align: center; 
 
    padding: 12px; 
 
    margin-bottom: 6px; 
 
    height: 44px; 
 
    width: 109px; 
 
    top: 242px; 
 
    background: #545454; 
 
} 
 
.chevron:hover:before, 
 
.chevron:hover:after { 
 
    background: blue; 
 
} 
 
.chevron { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.chevron:before, 
 
.chevron:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    height: 17%; 
 
    background: red; 
 
} 
 
.chevron:before { 
 
    left: 0; 
 
    width: 51%; 
 
    -webkit-transform: skew(0deg, 6deg); 
 
    -moz-transform: skew(0deg, 6deg); 
 
    -ms-transform: skew(0deg, 6deg); 
 
    -o-transform: skew(0deg, 6deg); 
 
    transform: skew(0deg, 6deg); 
 
} 
 
.chevron:after { 
 
    right: 0; 
 
    width: 50%; 
 
    -webkit-transform: skew(0deg, -6deg); 
 
    -moz-transform: skew(0deg, -6deg); 
 
    -ms-transform: skew(0deg, -6deg); 
 
    -o-transform: skew(0deg, -6deg); 
 
    transform: skew(0deg, -6deg); 
 
}

<div class="chevron"></div>

Answer 1

Я считаю, что вы были сбиты с толку, потому что шеврон поворачивается на 90 градусов. Если вы удалите этот поворот, гораздо легче понять расположение элементов шеврон:

.chevron { 
 
    position:relative; 
 
    height: 44px; 
 
    width: 109px; 
 
    background: #545454; 
 
} 
 

 
.chevron:before, .chevron:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 40%; 
 
    height: 17%; 
 
    background: red; 
 
} 
 

 
.chevron:before { 
 
    left: 5%; 
 
    width: 46%; 
 
    transform: skew(0deg, 6deg); 
 
} 
 

 
.chevron:after { 
 
    right: 5%; 
 
    width: 45%; 
 
    transform: skew(0deg, -6deg); 
 
}

<div class="chevron"></div>

Обратите внимание, что я также удалены префиксы поставщика для преобразования свойства для этого вопрос.

Answer 2

Что об этом: http://jsfiddle.net/8c2r3m5d/1/

К: до и: после того, как я добавил:

top:40%; 

должна быть сверху, потому что вся шеврон вращается, поэтому изменение топ составляет величину он идет влево и вправо

Answer 3

Просто отрегулируйте смещение top следующим образом:

.chevron:before,.chevron:after { 
    top: 42%; 
    height: 17%; 
} 

Значение верхнего смещения составляет 50% минус половину высоты (8%). Вы фактически центрируете шеврон вертикально, так как вы повернули его на 90 градусов, следовательно, похоже, что он должен быть горизонтально центрирован.

.chevron { 
 
    position: absolute; 
 
    text-align: center; 
 
    padding: 12px; 
 
    margin-bottom: 6px; 
 
    height: 44px; 
 
    width: 109px; 
 
    top: 50px; 
 
    background: #545454; 
 
} 
 
.chevron:hover:before, 
 
.chevron:hover:after { 
 
    background: blue; 
 
} 
 
.chevron { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.chevron:before,.chevron:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 42%; 
 
    height: 17%; 
 
    background: red; 
 
} 
 
.chevron:before { 
 
    left: 0; 
 
    width: 51%; 
 
    -webkit-transform: skew(0deg, 6deg); 
 
    -moz-transform: skew(0deg, 6deg); 
 
    -ms-transform: skew(0deg, 6deg); 
 
    -o-transform: skew(0deg, 6deg); 
 
    transform: skew(0deg, 6deg); 
 
} 
 
.chevron:after { 
 
    right: 0; 
 
    width: 50%; 
 
    -webkit-transform: skew(0deg, -6deg); 
 
    -moz-transform: skew(0deg, -6deg); 
 
    -ms-transform: skew(0deg, -6deg); 
 
    -o-transform: skew(0deg, -6deg); 
 
    transform: skew(0deg, -6deg); 
 
}

<div class="chevron"></div>