CSS выравнивание диапазонов, входов и кнопок - PullRequest
Новая
       5

CSS выравнивание диапазонов, входов и кнопок

4 голосов
/ 13 мая 2011

Я ищу способ выравнивания нескольких элементов (диапазонов, входов и кнопок) таким образом, чтобы, несмотря на их разные размеры, их вертикальная средняя точка находилась на одной горизонтальной линии: Alignment

Как мне добиться этого в CSS? Вот HTML-файл для игры: 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
    <style>
.content { font-size: 18px; border: 1px dotted blue;  }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
    </style>
</head>

<body>
<div class="content">
    <span class="label">Label: </span><input type="text">
    <span class="label">More text: </span><input type="text">
    <button type="submit">Submit Me</button>
    <div class="clear"></div>
</div>

</body>

</html>

Ответы [ 3 ]

13 голосов
/ 13 мая 2011

Установите высоту line-height: основного div самого высокого элемента в пикселях, затем установите vertical-align: middle. Возможно, вам также придется установить display:inline или display:inline-block для подэлементов.

Это должно сработать.

10 голосов
/ 13 мая 2011

Как уже говорили другие (Дэвид Нгуен и тридцать тридцать), добавление vertical-align:middle; обеспечит эффект после до тех пор, пока избавит вас от поплавков, которые в настоящее время находятся в вашем коде.Добавление display:inline-block; позволит вам лучше контролировать размеры, и я не знаю, планировали ли вы это, но я определенно заменил бы ваши <span class="label"> на фактические <label> теги.

1 голос
/ 13 мая 2011

Ваш диапазон, вход и кнопка нуждаются в свойстве: vertical-align:middle;display:inline

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...