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

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

1 голос
/ 18 сентября 2010

В настоящее время я использую: 

<table cellpadding="0" cellspacing="0">
    <tr><td><a href="cv.pdf" target="_blank">
    <img src="graphics/pdf.gif" width="24" height="24" /></a></td>
    <td width="10px"></td> <!--that just spaces the image from the text-->
    <td>
        <a href="cv.pdf" target="_blank"><em>Download CV.</em></a>
    </td></tr>
</table>

Довольно неуклюжий, но отрисовывается отлично.Есть ли лучший способ сделать это?

Ответы [ 2 ]

3 голосов
/ 18 сентября 2010

Установите следующее свойство CSS на вашем изображении: 

vertical-align: middle;
0 голосов
/ 18 сентября 2010

Разделите стол, объедините два якоря в один, удалите width и height на теге img, удалите тег em, , затем используйте vertical-align для центрирования изображение. Вы также можете использовать margin, чтобы добавить пробел между текстом и изображением, и font-style для курсивного текста.

HTML: 

<p class="cv">
    <a href="cv.pdf">
        <img src="image/source.png" /> Download CV.
    </a>
</p>

CSS: 

.cv {
    font-size: 14px;
    line-height: 1.4em;
    font-family: Arial, sans-serif;
}

.cv a {
    text-decoration: none;
    color: #999;
}

.cv img {
    vertical-align: middle;
    margin-right: 10px;
}

.cv a:hover {
    color: #333;
}

Видите, намного лучше. Удаление width и height улучшает отображение изображений (потому что браузеры отстают от интерполяции изображений. Если вам нужен другой размер, отличный от доступного, вы должны изменить размер самостоятельно.), А удаление target="_blank" вызовет меньше раздражения у ваших пользователей ,

Посмотрите, как работает здесь: http://jsfiddle.net/kZeCt/1/

...