Как разместить ссылку в середине div по высоте?

#html #css

#HTML #css

Вопрос:

Как мне разместить обновление ссылки в середине по высоте div nav_bar?

 <div id="nav_bar">
<a class="nav" id="refresh" href="#">Refresh</a>
</div>

Вот скрипка для получения дополнительной помощи
http://jsfiddle.net/axuxT /

Ответ №1:

Самый простой способ — установить line-height ту же высоту, что и контейнер. Это приведет к сбою, если вы когда-либо добавите больше текста, занимающего более одной строки (в зависимости от ваших обстоятельств, вы можете избежать этого с white-space: nowrap помощью ).
Вы также можете добавить верхний и нижний отступы, например padding: 30px 0 .
Вы могли бы добавить display: table-cell и затем vertical-align: middle . Однако единственная проблема с этим заключается в том, что он не поддерживается <= IE8.

1. @Sparky672: Да, возможно, я должен упомянуть об этом.

2. 1, хорошие варианты. одно замечание: варианты 1 и 2 работают только для контейнера с фиксированной высотой. Смотрите вторую часть моего ответа для решения, которое будет масштабироваться вместе с родительским контейнером. (конечно, у каждого отдельного решения есть свои уникальные недостатки … вам придется выбрать тот, который наилучшим образом соответствует вашим потребностям).

Ответ №2:

Если вы знаете высоту родительского div (например: 35px ), и вы знаете, что она не изменится, тогда вы можете просто установить line-height: 35px; ссылку, а встроенное форматирование браузера сделает все остальное. Я обновил вашу скрипку, чтобы показать этот подход: http://jsfiddle.net/axuxT/1 /.

Обновить

Если вам нужно, чтобы div контейнера мог изменять размер, это немного сложнее. Вот обновление для вашей скрипки, которое показывает этот подход: http://jsfiddle.net/axuxT/3 /. Обратите внимание, что в этом случае содержимое должно быть display:block с известной высотой. Для этого также требуется некоторая дополнительная разметка — дополнительная оболочка div и плавающий разделитель div.

Ответ №3:

Это звучит как простая вещь, не так ли? но это не так, это правильно, вам просто нужно margin-top или vertical-align или position: absolute; top: 50%; margin-top: -half-the-element-height-px' .

Я ненавижу CSS.