Выравнивание по вертикали не вступает в силу

Question

Я не уверен, почему мой текст «Добавить в избранное» не будет совпадать с серединой синего элемента, что я и хотел бы сделать.Я добавил vertical-align:middle в оба класса ниже.Если я удаляю изображение fav.png внутри синего поля, текст просто переходит в верхнюю часть красной пунктирной рамки.

CSS:

.favouriteLink
{
    border: 1px solid black;
    margin:3%;
    background-image: url('images/blueBanner.png');
    border-radius: 15px;
    height:40px;
    vertical-align:middle;
    text-align:center;

}

.favouriteLink a
{
    border: 1px dotted red;
    display:block;
    text-decoration:none;
    text-weight:bold;
    color:white;
    vertical-align:middle;
}

HTML:

<div class="favouriteLink">
    <a href="javascript:alert('test')"><img class="navImg" src="images/fav.png" />Add to Favourites</a>
</div>

РЕДАКТИРОВАТЬ:

Рабочая скрипка: http://jsfiddle.net/YcMgh/2/

По какой-то причине установка высоты в соответствии с предложением 40px будет центрировать текст, но только еслиизображение было меньше, поэтому я не заметил этого изначально.Я немного запутался в этом, потому что, как бы изменение положения изображения изменило текст?Разве текстовое поле не отделено от изображения?

Например ... Так как мой img составляет 32 на 32 пикселя, это происходит - http://jsfiddle.net/YcMgh/3/

Однако, если я изменяю на 25 пикселей: http://jsfiddle.net/YcMgh/4/

Answer 1

Две вещи:

1. Добавьте line-height: 40px к своему правилу .favouriteLink a.Я выбрал это, так как оно соответствует height, которое вы установили для кнопки.

2. Добавьте правило .favouriteLink img {vertical-align: middle;}.Если это не совсем то, что вам нужно, используйте смещения по длине, такие как vertical-align: -9px или что-то подобное.

Answer 2

Я думаю, что все это решение можно упростить.Вместо того, чтобы включать URL-адрес изображения для кнопки в вашу разметку потенциально пару раз, я думаю, было бы легче перенести ее в класс CSS.Таким образом, вы можете определить базовый класс CSS, который представляет собой кнопку без изображения, и другой класс для добавления в правильное фоновое изображение.

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

Примером такой разметки может быть следующий:

HTML:

<a href="javascript:alert('test');" class="link favourite-link">
    <span>Add to Favourites</span>
</a>

CSS:

.link
{
    margin:5px;
    border:1px dashed #333;
    background:#ededed;
    border-radius: 15px;
    height:40px;
    vertical-align:middle;
    text-align:center;
    display:inline-block;
    line-height:40px;
    padding:0 7px;
    width:250px;
}
.favourite-link span {
    background:url("image/goes/here.png") no-repeat left center;
    display:inline-block;
    padding-left:20px /* equal to icon width */;
}

Примечание : лишние span могут быть удалены, если вам не требуется, чтобы текст был центральным, а значок рядом с текстом.

Answer 3

Забудьте все остальные ответы. Вам просто нужно правильно выровнять изображение. Выравнивание по базовой линии выталкивает текст вниз Выровняйте его сверху или надписью, чтобы исправить это.

см. Пример-скрипку здесь

Вам не нужно выравнивать по вертикали a или его контейнер. Вам может понадобиться настроить значения в соответствии с вашим изображением / высота текста.

Answer 4

Я просто предпочитаю использовать line-height: 40px; // Your height of your div Мне это нравится, потому что легче контролировать, насколько велика высота предмета!

Answer 5

Попробуйте добавить это правило к .favouriteLink:

display:table-cell;

Это заставит ваш браузер выравниваться по вертикали так, как вы, вероятно, ожидаете.

Answer 6

Попробуйте добавить это в свой CSS:

.favoriteLink * {
    vertical-align: middle;
}

Чтобы получить желаемые результаты, вам нужно установить vertical-align для всех элементов внутри div.