Как выровнять альтернативный текст в плавающем изображении по вертикали? - PullRequest
Новая
       30

Как выровнять альтернативный текст в плавающем изображении по вертикали?

4 голосов
/ 04 марта 2012

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

Это HTML-код: 

<div class="viewport">
 <a href="#">
  <img src="http://yahoo.com/" alt="no image" />
 </a>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 </div>
</div>

А это код CSS: 

.viewport {
 background: #bbb;
 width: 350px;
 height: 300px;
 padding: 5px;
}

.viewport img {
 float: left;
 margin: 5px;
 width: 100px;
 height: 100px;
 background: #000;
 text-align: center;
}

.viewport div {
 margin-left: 20px;
}

Спасибо, что нашли время прочитать.

Ответы [ 2 ]

7 голосов
/ 04 марта 2012

edit 2017: Flexbox FTW (возможно, с a как в качестве элемента flex (его контейнер имеет вертикальную / вторую ось по умолчанию align-items: stretch), так и контейнер Flex (вертикальное выравнивание затем достигается с помощью flex-direction:column и justify-content: whatisneeded)

Я полагаю, что @alt имеет высоту содержимого, намного меньшую, чем 100px.

Зафиксируя line-height равным высоте, vetical-align сделает то, что вы намереваетесь сделать.
Вот скрипка: http://jsfiddle.net/PhilippeVay/Xevph/

3 голосов
/ 04 марта 2012

нет, ты не можешь этого сделать.Но вы можете изменить цвет и свойства дисплея, например 

img[alt]{
color:red;
 display:none;
}


Вот полезный совет: сначала проверьте, существует ли файл, т. Е. Загружаемое изображение доступно или нет, если нет, то отобразите divс текстом атрибута alt в этом DIV.

...