Прыгающие кнопки

fr1ar · August 7, 2012

Ребят, выручайте. Вот простейший пример:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="ru" />
    <title>test</title>
<style>
    input[type="submit"] { width: 300px; height: 60px; border: 1px solid black; margin: 0 auto; }
</style>
</head>
<body>
<div style="background-color:#eee; width:650px; text-align: center;">
    <input type="submit" value="Многострочная кнопка& #13;& #10;номер 1" />
    <input type="submit" value="Однострочная кнопка 1" />
    <input type="submit" value="Однострочная кнопка 2" />
    <input type="submit" value="Многострочная кнопка& #13;& #10;номер 2" />
    <input type="submit" value="Однострочная кнопка 3" />
    <input type="submit" value="Многострочная кнопка& #13;& #10;номер 3" />
    <input type="submit" value="Многострочная кнопка& #13;& #10;номер 4" />
</div>
</body>
</html>

А вот результат:

А хотелось чтобы было вот так:

Почему они прыгают? line-height: 60px тоже не помогает

пример

P.S. Прошлось в коде поставить пробелы между & и #13; иначе форум не пропускает.

mrnobody · August 7, 2012

Возьмите )

Скрин:

USF · August 7, 2012

прыгают кнопки с 2мя строками текста из-за того, что располгаются на базовой линии(она проходит по нижней границе текста).

всем кнопкам поставь vertical-align: middle;

fr1ar · August 7, 2012

Спасибо! Действительно помогло

Sign In

Прыгающие кнопки

Question

fr1ar

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

fr1ar

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information