выровнять ссылку по вертикали рядом с изображением с помощью CSS [дубликата]

Question

выровнять ссылку по вертикали рядом с изображением с помощью CSS [дубликата]

0

РЕДАКТИРОВАТЬ:
Да, это дубликат, моя ошибка (я новичок в CSS). Но может ли кто-нибудь объяснить обоснование выравнивания изображения, в отличие от ссылки/текста? Существует ли какая-то более масштабная концепция, которая поможет мне лучше понять концепции CSS и избежать таких проблем в будущем?

Оригинальная (повторяющаяся) часть:
У меня есть сценарий, где я хочу иметь ссылку рядом с изображением на моей странице, и ссылка должна быть выровнена так, чтобы она была вертикально центрирована с изображением. Конечно, я не знаю точной высоты изображения, поэтому это нужно делать динамически.

Учитывая этот кусок HTML, как бы я мог добиться такой вещи с помощью CSS?

<div class="myDiv">
    <img src="myImage"/>
    <a href="#">My Link!</a>
</div>

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

A.R. 26 нояб. 2013, в 19:12

Источник

0

@MarcB Спасибо, я новичок в CSS, поэтому я подумал, что есть разница. Приятно видеть, что сообщество оправдывает свою репутацию.
A.R. 26 нояб. 2013, в 17:48
2

CSS действительно не знает об изображениях. это просто блоки для отображения на экране. текстовый блок, блок изображения ... блоки блоков блоков.
Marc B 26 нояб. 2013, в 17:49
1

@MarcB Какое это имеет отношение к чему-либо?
A.R. 26 нояб. 2013, в 17:51
0

Хотели бы вы, чтобы я дал вам длинное, растянутое объяснение или просто указал на спецификации, которые объясняют, как работает вертикальное выравнивание?
j08691 26 нояб. 2013, в 18:10
0

Я хотел бы, чтобы сообщество CSS отключило отношение, когда я задаю вопрос. Я пытаюсь учиться, черт возьми.
A.R. 26 нояб. 2013, в 18:13
0

Нет, я серьезно. Я не пытался быть вялым. Это скучное объяснение, которое не так весело читать или писать. Я просто хотел узнать, хотите ли вы, чтобы я разъяснил вам это в ответе или просто указал на соответствующие технические документы.
j08691 26 нояб. 2013, в 18:15

Показать ещё 4 комментария

Теги:

html

css

html5

layout

4 ответа

0

просто используйте vertical-align: middle;

.myDiv img {
    vertical-align: middle;
}

Vinay Pratap Singh 26 нояб. 2013, в 16:36

0

попробуй это:

.myDiv img{
vertical-align:middle;
}

DEMO

Mohsen Safari 26 нояб. 2013, в 15:14

0

Добавить vertical-align:middle; к изображению вместо ссылки.

Обновлена скрипка.

Hiral 26 нояб. 2013, в 14:48

Ещё вопросы

@MarcB Спасибо, я новичок в CSS, поэтому я подумал, что есть разница. Приятно видеть, что сообщество оправдывает свою репутацию.
CSS действительно не знает об изображениях. это просто блоки для отображения на экране. текстовый блок, блок изображения ... блоки блоков блоков.
@MarcB Какое это имеет отношение к чему-либо?
Хотели бы вы, чтобы я дал вам длинное, растянутое объяснение или просто указал на спецификации, которые объясняют, как работает вертикальное выравнивание?
Я хотел бы, чтобы сообщество CSS отключило отношение, когда я задаю вопрос. Я пытаюсь учиться, черт возьми.
Нет, я серьезно. Я не пытался быть вялым. Это скучное объяснение, которое не так весело читать или писать. Я просто хотел узнать, хотите ли вы, чтобы я разъяснил вам это в ответе или просто указал на соответствующие технические документы.

Josh Crozier · Accepted Answer · 2013-11-26T15-35-00.000Z

4.8. Вертикальное выравнивание: свойство выравнивания базовой линии с вертикальным выравниванием

Применяется к элементам inline-level и table-cell

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

Хотя элементы a и img по умолчанию являются inline, свойство vertical-align:middle должно использоваться вместо элемента img.

Пример jsFiddle

.myDiv img {
    vertical-align: middle;
}

Конечно, потому что выравнивание изображения - это то, что я хотел сделать. ОК, это работает, но почему это так?
@AR Я добавил некоторые характеристики.