Стрелка вниз после ДИВ не центрирован

Question

Я только что сделал это div

Demo

Но стрелка после div не выровнен по центру, когда я ввожу новый div внутри

HTML

<div id="hero_intro"> 
    <div class="quote">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
</div> 

CSS

#hero_intro { 
    background: #f18c22; 
    height: 150px; 
    text-align: center; 
    color:#fff; 
    z-index: 5000; 
    font-size: 32px; 
} 
#hero_intro:after { 
    content:''; 
    position: absolute; 
    width: 0; 
    height: 0; 
    margin-top: 150px; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 20px solid #f18c22; 
} 
#hero_intro .quote { 
    width: 80%; 
    margin-top: 30px; 
    display: inline-block; 
    text-align: center; 
    line-height: 1.2em; 
    color:#fff; 
} 

Answer 1

Сделать left: 50%;, который сделает его центром, но не центр точно, так что используйте margin-left: -20px; 1/2 т.е. от общего width в absolute расположенного треугольника.

Demo

#hero_intro:after { 
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 0; 
    margin-top: 150px; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 20px solid #f18c22; 
    left: 50%; /*Add these*/ 
    margin-left: -20px; 
} 

Примечание: Убедитесь, что вы используете position: relative; для родительского контейнера, а затем position элемент соответственно .. Кроме того, использование bottom атрибута вместо margin-top

лучшего решения, независимо из height вашего элемента, избавиться от margin-top и присвоить position: relative; до номинала контейнер.

Demo 2

#hero_intro { 
    background: #f18c22; 
    height: 150px; 
    text-align: center; 
    color:#fff; 
    z-index: 5000; 
    font-size: 32px; 
    position: relative; 
} 
#hero_intro:after { 
    content:''; 
    position: absolute; 
    width: 0; 
    height: 0; 
    bottom: -20px; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    border-top: 20px solid #f18c22; 
    left: 50%; 
    margin-left: -20px; 
} 
#hero_intro .quote { 
    width: 80%; 
    margin-top: 30px; 
    display: inline-block; 
    text-align: center; 
    line-height: 1.2em; 
    color:#fff; 
} 

Answer 2

Добавить left: 50%; в #hero_intro:after CSS. Родительский контейнер должен быть равен position: relative.

Answer 3

здесь исправление: http://jsfiddle.net/K5qdc/3/

#hero_intro{ 
background: #f18c22 ; 
height: 150px; 
text-align: center; 
color:#fff; 
z-index: 5000; 
font-size: 32px; } 

#hero_intro:after { 
content: ''; 
position: absolute; 
width: 0; 
height: 0; 
border-left: 20px solid transparent; 
border-right: 20px solid transparent; 
border-top: 20px solid #f18c22; 
bottom: 28px; 
left:0; 
margin: 0 auto; 
right:0; } 

остальное вы можете найти его в стельку