Невозможно определить стиль CSS

Question

У меня есть некоторые проблемы с стилем CSS. Первое, что у меня есть с 2 входами и кнопкой. кнопка идеально подходит, когда я изменяю размер окна, но входы танцуют вокруг, почему?

и het h2 это добавляется, когда кнопка нажата, маленькая стрелка должна быть всегда посередине. Также текст должен быть всегда посреди всплывающего, горизонтального и вертикального. Это возможно? и как?

здесь форма:

#lname, #fname { 
    width: 90%; 
    height: 50px; 
    margin-top: 6%; 
    border-radius: 5px; 
    background-color: #1e2228; 
    color: #ddd; 
    border: 0px; 
    font-size: 2em; 
    position: absolute; 
    text-align: center; 
} 

#fname { 
    left: 40px; 
    top: 18px; 
} 

#lname { 
    left: 40px; 
    top: 84px; 
} 

#btn { 
    width: 100%; 
    height: 50px; 

    margin-top: 72px; 
    border-radius: 0 0 5px 5px; 
    background-color: #1e2228; 
    color: #ddd; 
    border: 0px; 
    font-size: 2em; 
    position: absolute; 
    left: 0px; 
    top: 128px; 
} 

здесь всплывающее окно:

h2 { 
    margin: auto; 
    margin-top: 100px; 
    position: relative; 
    width: 50%; 
    height: 205px; 
    padding: 0px; 
    background: #2F3742; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    text-align: center; 
    font-size: 2em; 
    color: #8092AA; 
    margin: 100px auto 0 auto; 
    padding-top: 6%; 
} 

h2:after { 
    content: ''; 
    position: absolute; 
    border-style: solid; 
    border-width: 0 20px 20px; 
    border-color: #2F3742 transparent; 
    display: block; 
    width: 0; 
    z-index: 1; 
    top: -20px; 
    left: 355px; 
} 

конечно, вы должны увидеть это в действии! Ну вот! http://codepen.io/shiva112/pen/dGMrWB

Answer 1

Почему вы используете абсолютное позиционирование? Это действительно беспорядок, но просто добавьте для своих элементов ввода margin-left:5%.

Для вашего курса arrow: h2:after{left:50%; margin-left:-20px; }

И если вы хотите центрировать текст по вертикали и по горизонтали, вам необходимо обернуть текстовое содержимое h2 в span или любой другой элемент, который вам нравится.
Затем установите стиль h2 элемента к: { display:table; width:100%; } и его дочерний элемент к: { displat:table-cell; vertical-align:middle; }