Элементарный вопрос по верстке

Тема в разделе "Актуально, только не в тему", создана пользователем Cardinal, 25.05.2008.

  1. Cardinal
    Offline

    Cardinal Недавно здесь

    Регистрация:
    19.07.2007
    Сообщения:
    82
    Симпатии:
    1
    Пол:
    Мужской
    ...с которым, тем не менее, я частенько сталкиваюсь. Как выровнять текст и картинку по вертикали "по центру" без использования таблиц?

    Пример:

    Код (html):
    1. <img src="http://status.icq.com/online.gif?icq=123456789&amp;img=5" border="0" width="18" height="18" />123-456-789


    Как видно, цветочек аськи "выше" текста, т.е. текст и изображение выравниваются по низу строчки в основых браузерах, по крайней мере..

    С div не получается особо, с line-height тоже вроде экспериментировал
     
    Последнее редактирование: 25.05.2008
  2.  
  3. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    А у меня сразу по центру стоит, что я делаю не правильно?)
     
  4. Cardinal
    Offline

    Cardinal Недавно здесь

    Регистрация:
    19.07.2007
    Сообщения:
    82
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    хм)) ну а у меня в Опере 9.02, в FF 2.0.0.11 и в IE6-7 наблюдается нечто, как на картинке. Т.е. я хочу поднять текст чуть выше:)

    Доктайпов несколько разных попробовал для интереса - не выравнивается оно

    Код (html):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    2. <?xml version="1.0" encoding="windows-1251">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    6. <title>Untitled Document</title>
    7. </head>
    8. <body>
    9. <img src="http://status.icq.com/online.gif?icq=123456789&amp;img=5" border="0" width="18" height="18" />123-456-789
    10. </body>
    11. </html>
     

    Вложения:

    • 123456789.png
      123456789.png
      Размер файла:
      3.7 КБ
      Просмотров:
      3
  5. Offline

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    424
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    Нужно стили применять, чтобы выравнивать. А так, у каждого браузера свои настройки, и версии браузеров тоже влияют, вот и выводит где как.
     
  6. Cardinal
    Offline

    Cardinal Недавно здесь

    Регистрация:
    19.07.2007
    Сообщения:
    82
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    sergv2005, решение в студию:) margin-ами не получается!
     
  7. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    Cardinal, тебе это так сильно необходимо?) пропиши div в absolute'ным позиционированием... :))))))))))))
     
  8. Offline

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    424
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    Изучаем стили, и тогда всё будет нормально.
    вот пример:
    Код (html):
    1. <div style="font-size:10px; border:1px solid #ccc; height:16px;">
    2. <img src="http://status.icq.com/online.gif?icq=123456789&amp;img=5" width="16" height="16" border="0" align="absmiddle" />123-456-789
    3. </div>

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

    Это так для примера, а дальше, изучаем HTML и CSS.
     
    Cardinal нравится это.
  9. Cardinal
    Offline

    Cardinal Недавно здесь

    Регистрация:
    19.07.2007
    Сообщения:
    82
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    ну...я бы сказал, изучаем тонкости HTML - align="absmiddle" нечасто встретишь, по-моему. В справочнике не смотрел, каюсь) Спасибо!
     
  10. Physicist
    Offline

    Physicist Недавно здесь

    Регистрация:
    12.09.2006
    Сообщения:
    116
    Симпатии:
    9
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    Не часто, особенно если учесть, что в стандарте оно отсутствует.
    В HTML3 атрибут align может принимать только значения top, middle, bottom, left или right (http://www.w3.org/MarkUp/html3/img.html).
    В HTML4 атрибут align вообще отсутствует (http://www.w3.org/TR/html401/struct/objects.html#h-13.2), там всё через css должно настраиваться (свойство vertical-align).
     
  11. Offline

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    424
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    Часто или не часто, присутствует или нет в хтмл версиях, это свойство есть наверно в любой книге по хтмл, по крайней мере из тех книг и веб справочников что видал, оно везде есть.
    А насчет vertical-align, так это свойство работает не всегда и не везде.

    Данный пример я привёл всего лишь как пример, и как 100%-е средство решения проблемы не пойдёт, так как каждый браузер пляшет по своему. Но по крайней мере, можно получить хотябы примерную центровку, без лишнего кода, хлтябы для IE и на его ядре. А для остальных можно и через ксс подогнать текст.
     
  12. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

    А я бы сделал картинкой текст, равный по высоте с листочком и все) Дизайнерский подход, бгг)))
     
  13. Offline

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    424
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: Элементарный вопрос по верстке

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

Поделиться этой страницей

Загрузка...