Позиционирование текста и изображения с помощью css

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

Вот как это выглядит в 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>

источник

2010-10-06 Martin

Весь код страницы играет здесь определенную роль. Можете ли вы опубликовать ВСЕ HTML? – KatieK

@KatieK - Обновлен вопрос, но это действительно простой html, поскольку я тестировал это много. Благодаря! – Martin

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

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

источник

2010-10-06 18:07:38

Хорошо, я подумал об этом решении, но хотел получить его внутри, если это было возможно. – Martin

Может быть, было бы лучше, чтобы удалить IMG тег и сделать это в CSS в одиночку:

h1 { 
    padding: 0 0 0 30px; 
    background: url(image.png) no-repeat left; 
}

источник

2010-10-06 19:23:51

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

обходные пути

Мой шрифт ('Destroy') был выстроен очень сильно к нижней части. Поэтому, если у меня не было достаточно места для этого, он выглядел отрубленным внизу. Были обработаны два решения:

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

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

источник

2011-02-09 04:54:00 Chris

Привет, Крис, добро пожаловать в SO! Пожалуйста, имейте в виду, что ответы не являются сообщениями, поэтому мы стараемся не включать приветствия, подписи или подписи. Кроме того, я предлагаю вам прочитать [faq]. – Roflo

Позиционирование текста и изображения с помощью css

ответ

Смежные вопросы