Выравнивание поля ввода и текстовые эффекты при выравнивании

Question

Выравнивание поля ввода и текстовые эффекты при выравнивании

0

У меня есть следующая скрипка:

Код HTML выглядит следующим образом:

<div class="loginbarGrad">

<div style="position:relative; float:right; padding: 11px 65px 0 0;">
    <input type="text" placeholder="EMAIL" value="EMAIL" class="singleField" name="kp_email" id="kp_email">
    <input type="password" placeholder="PASSWORD" value="PASSWORD" class="singleField" name="kp_password" id="kp_password">
    <a class="signIn">Sign In</a> 
</div>

</div>

Вы можете увидеть CSS на скрипке.

Я пытаюсь увеличить размер коробки входов, а также пытаюсь увеличить размер "входа". Мне было интересно, может ли кто-нибудь объяснить, почему, когда я увеличиваю размер шрифта, он не центрируется по вертикали внутри панели входа, а также почему это влияет на выравнивание окна входа/пароля? Я бы хотел иметь его, чтобы ящики и знак не влияли друг на друга. Это может быть базовая функция CSS, но она ускользает от меня, поэтому я надеюсь, что у кого-то будет больше опыта, чем я могу объяснить это.

Спасибо!

lobstahcrushah 18 сен. 2013, в 22:57

Источник

Теги:

html

css

2 ответа

0

вы также можете плавать слева от входов и размещать их с небольшим отрывом по бокам, и вы можете увеличить размер шрифта.signin, просто убедитесь, что добавили высоту строки с той же высотой, что и входные

.signIn { font-size: 24px; line-height: 18px; }
#kp_password , #kp_email { float:left; margin: 0 5px;}

Itay Sidis 18 сен. 2013, в 20:02

Ещё вопросы

Chad · Accepted Answer · 2013-09-18T17-55-00.000Z

Почему бы вам не попробовать:

.loginbarGrad > div > * {
    vertical-align: middle;
}

Элементы внутри div внутри .loginbarGrad будут выравниваться по середине друг друга.