Расположение текста и изображений с помощью CSS - PullRequest
Новая
       0

Расположение текста и изображений с помощью CSS

1 голос
/ 06 октября 2010

У меня проблема с позиционированием текста с изображением с помощью CSS.Это хорошо работает в Firefox и IE, но не в Safari.Изображение размещается слева от текста, и я хочу, чтобы текст располагался в центре изображения в вертикальном положении.Я использую собственный шрифт (MyriadProLight), использующий font-face.

Вот как это выглядит в Safari: http://oi52.tinypic.com/2eg5p8x.jpg

Вот как я хочу это (и как это выглядитв Firefox и IE): http://oi54.tinypic.com/1zg3xhx.jpg

HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

    <head>
        <title>Title</title>
        <style>

            @font-face {
            font-family: 'MyriadProLight';
            src: url('myriadpro-light-webfont.eot');
            src: local('☺'), url('myriadpro-light-webfont.woff') format('woff'), url('myriadpro-light-webfont.ttf') format('truetype'), url('myriadpro-light-webfont.svg#webfontpR0gSEvM') format('svg');
            font-weight: normal;
            font-style: normal;
            }

            h1 
            {
                font-size: 20pt;
                font-family: "MyriadProLight", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
                color: #333;
                text-transform:uppercase;
                line-height: 21pt;
                font-weight: normal;
                letter-spacing: 0px;
                margin: 0px 0px 10px 0px;
                padding: 0px;
            }

            .iconimage
            {
                margin-right: 7px;
                vertical-align: middle;
            }

        </style>
    </head>
    <body>
        <h1><img class="iconimage" src="image.png" />This is the header</h1>
    </body>
</html>

Ответы [ 3 ]

1 голос
/ 09 февраля 2011

Не уверен, что это что-то добавляет, но если вы просматриваете свою страницу в Firefox, а затем используете firebug для поиска элемента, вы можете заметить, что веб-шрифты @ font-face не располагаются вертикально в центре их линии.высоты.Я не знаю достаточно о шрифтах, чтобы знать, является ли это проблемой файла шрифта, но я сделал все свое поколение с font-squirrel, который люди считают наиболее надежным вариантом.

WORKAROUNDS

Мой шрифт («Уничтожить») выстроился очень сильно внизу.Так что, если бы я не включил достаточно места для этого, он выглядел обрубленным внизу.Работали два решения:

  1. Если ваш элемент не ломается: сделайте высоту строки удвоенной к размеру шрифта.

  2. Если ваш элементперерывы: добавьте отступ в конец элемента, равный или немного меньший, чем размер шрифта.

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

0 голосов
/ 06 октября 2010

Возможно, было бы лучше удалить тег img и сделать это только в CSS: 

h1 {
    padding: 0 0 0 30px;
    background: url(image.png) no-repeat left;
}
0 голосов
/ 06 октября 2010

Позиционирование изображений внутри текста - грязное дело. Я бы переместил изображение за пределы вашего тега h1 и переместил его влево, а затем изменил размещение с полями. Примерно так: 

<img class="iconimage" src="mail.png" style="float:left; margin:10px" />
<h1>This is the header</h1>
...