Позиционирование кнопки и текста в ней

SergWP · Регистрация: 24.08.2013

Author24 — интернет-сервис помощи студентам

Пытаюсь сделать форму логина, но в позиционировании не силён.
Помогите, плз, сделать вот так:

Почти получилось, но засада с кнопкой. Её положение и положение текста никак мне не даётся.
См: http://jsfiddle.net/P7v8g/2/

HTML5

<div class="forumloginform">
<input class="inputbox autowidth" placeholder="логин" size="25" name="username" id="username"  tabindex="1" value="" type="text">
<input class="inputbox autowidth" placeholder="пароль" size="25" name="password" id="password" tabindex="2" value="" type="password">
<input type="submit" id="sendButton" value="Вход на форум" class="sendButton" />
</div>

CSS

.forumloginform {
    background-color: orange;
    width: 280px;
}
.forumloginform input[type="text"], .forumloginform input[type="password"] {
    background: none repeat scroll 0 0 Wheat;
    border: 0 none;
    font-size: 0.9em;
    width: 48%;
}
 
#username {
    margin: 3px 0 2px 10px;
}
#password {
    margin: 1px 0 3px 10px;
}
#sendButton {
    background-color: RoyalBlue;
    border: 0 none;
    color: wheat;
    position: relative;
    top: -1em;
}

@zme9 · 11.03.2014, 15:51

Так а что нужно сделать с кнопкой ?

SergWP · 11.03.2014, 16:27 **[ТС]**

Сообщение от zme9

Так а что нужно сделать с кнопкой ?

Спозиционировать по центру (по высоте), увеличив размер по высоте (height).
Текст в ней также нужно расположить по центру по высоте.

Абсолютное позиционирование не катит. Блок будет использоваться в адаптивном резиновом шаблоне.

@Academik · 11.03.2014, 19:11

SergWP, попробуйте так:

CSS

#sendButton {
    padding: 5px;
    float: right;
    margin: 0 10px 0 0;
}

http://jsfiddle.net/P7v8g/4/

Добавлено через 2 часа 36 минут
SergWP, добавьте в эту кнопку ещё:

CSS

1	cursor: pointer;

@BigProgrammer · 11.03.2014, 20:50

По-моему, лучше всего это сделать через таблицу, написав

CSS

1	vertical-align: middle

на ячейках таблицы.
Пример:

HTML5

<div class="forumloginform">
<div class="cell"><input class="inputbox autowidth" placeholder="логин" size="25" name="username" id="username"  tabindex="1" value="" type="text">
<input class="inputbox autowidth" placeholder="пароль" size="25" name="password" id="password" tabindex="2" value="" type="password"></div>
<div class="cell"><input type="submit" id="sendButton" value="Вход на форум" class="sendButton" /></div>

CSS

.forumloginform {
    background-color: orange;
    width: 280px;
    display: table;
}
.forumloginform .cell {
  display: table-cell;
  vertical-align: middle;
}
.forumloginform input[type="text"], .forumloginform input[type="password"] {
    background: none repeat scroll 0 0 Wheat;
    border: 0 none;
    font-size: 0.9em;
}
 
#username {
    margin: 3px 0 2px 10px;
}
#password {
    margin: 1px 0 3px 10px;
}
#sendButton {
    background-color: RoyalBlue;
    border: 0 none;
    color: wheat;
}

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	11.03.2014, 15:51	2
	Так а что нужно сделать с кнопкой ? 0

SergWP 334 / 334 / 57 Регистрация: 24.08.2013 Сообщений: 1,472
	11.03.2014, 16:27 [ТС]	3
	Сообщение от zme9 Так а что нужно сделать с кнопкой ? Спозиционировать по центру (по высоте), увеличив размер по высоте (height). Текст в ней также нужно расположить по центру по высоте. Абсолютное позиционирование не катит. Блок будет использоваться в адаптивном резиновом шаблоне. 0

	11.03.2014, 20:50