0 Пользователей и 1 Гость просматривают эту тему.
  • 9 Ответов
  • 20180 Просмотров
*

PaLyCH

  • Давно я тут
  • 956
  • 146 / 19
  • Менеджер проектов
Создаю блок из DIV или SPAN.
Код
<span class="price"> Жопарвдароывр </span>
Прописываю следующие теги через CSS:
Код
span.price {
dipslay: block;
width: 280px;
text-align: left;
margin-left: 8px;
margin-right: 8px;
background-color: #ffcc01;
margin-top: 16px;
padding-left: 5px;
padding-right: 5px;
[b]vertical-align: middle;[/b]
padding-bottom: 6px;
padding-top: 6px;
height: 50px;
display: block;
}
Через тег vertical-align прописываю выравнивание по вертикали. А текст все равно выравнивается по вертикали. Я уже давно такой глюк заметил, все не знал как это решить. И что делать.


[вложение удалено Администратором]
*

baldesarini

  • Осваиваюсь на форуме
  • 27
  • 1 / 0
  • Брутальный мерзавец
Re: Выравнивание по вертикали
« Ответ #1 : 27.03.2008, 14:29:07 »
исходя из кода видно что высота диву задана, почему бы просто не выставить отступ сверху? а так впринципе предыдущий оратор все объяснил
*

PaLyCH

  • Давно я тут
  • 956
  • 146 / 19
  • Менеджер проектов
Re: Выравнивание по вертикали
« Ответ #2 : 27.03.2008, 14:33:55 »
Я только начал себя оттучать от таблиц, и снова придется к им вернуться. :((((9 Спасибо за совет. Но данное решение рушит к черту все....
исходя из кода видно что высота диву задана, почему бы просто не выставить отступ сверху? а так впринципе предыдущий оратор все объяснил
Потому что текст в этом диве разный, может и в одну строчку быть, а может и две.
*

PbICb

  • Захожу иногда
  • 66
  • 38 / 0
  • Мяфф...)
Re: Выравнивание по вертикали
« Ответ #3 : 30.03.2008, 10:20:55 »
Попробуй код сохранить HTML-кой и посмотри на результат. Решение простое, не раз мною использованное. В основе, конечно, display: table-cell , о чем и говорилось выше. Но, может быть, когда-нибудь пригодится )

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Просто пример</title>
  <style>
    .greenBorder {border: 1px solid green;} /* бордюрчег */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; background: #CCCCCC; height: 300px; width: 300px;  position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        Пример текст<br />
        выровненного в блоке по вертикали<br />

      </div>
    </div>
  </div>
</body>
</html>
UI, UX, Interaction design, Kung Fu и другие страшные слова
Ить, ни, сан, си, го - беспечен гуляющий заяц...
*

PaLyCH

  • Давно я тут
  • 956
  • 146 / 19
  • Менеджер проектов
Re: Выравнивание по вертикали
« Ответ #4 : 30.03.2008, 19:00:11 »

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

Мало того, что потеряны все преимущества перед табличной вёрсткой (компактность кода, семантика), так ещё и приобретены дополнительные недостатки в виде потенциальных проблем с гибкостью данного кода (например, высота не позволит использовать его как универсальный контейнер и др.). Также хотелось бы подчеркнуть избыточный характер  кода применительно к обозначенной задаче.

Главное заблуждение коллег, делающих первые шаги в XHTML - нужно обязательно убрать из макета абсолютно все таблицы. Таблицы никто не запрещал, они являются стандартным элементом всех современных спецификаций HTML/XHTML.

Фраза "таблицы - зло" настолько крепко врезается в умы, что на свет рождаются такие "дивные" монстры. Удалить таблицу, чтобы потом её эмулировать - это нездоровый перфекционизм, который достоин лучшего применения.

Если проблема ещё не решена, покажи свою страницу, общими усилиями поможем

А я уже решил эту проблему.... Теперь работую над другой, не могу два блока на DIV отцентрировать. Думаю что справлюсь.
*

one_more

  • Захожу иногда
  • 139
  • 87 / 3
  • there is no spoon
Re: Выравнивание по вертикали
« Ответ #5 : 31.03.2008, 07:06:38 »
Фраза "таблицы - зло" настолько крепко врезается в умы, что на свет рождаются такие "дивные" монстры. Удалить таблицу, чтобы потом её эмулировать - это нездоровый перфекционизм, который достоин лучшего применения.
OnTheFlyRU, респект. Если не возражаете, подпишусь под каждым словом =)
Errare humanum est
*

PbICb

  • Захожу иногда
  • 66
  • 38 / 0
  • Мяфф...)
Re: Выравнивание по вертикали
« Ответ #6 : 31.03.2008, 08:48:16 »
Извиняюсь, но вопрос состоял в выравнивание блока по вертикали. Я же отвечала в рамках темы - это просто демонстрация того, что почти все возможно )) 
Тем более, иногда попадаются заказчики, требующие 100% блочную и валидную верстку, готовые платить очень неплохие суммы за требуемый результат. В таких случаях мне проще сделать так, как требуют, чем объяснять, почему таблица будет предпочтительней. Плюс ко всему, иногда верстка требуется под специфические проекты, в которых использование таблиц просто неприемлемо.
« Последнее редактирование: 31.03.2008, 08:52:16 от PbICb »
UI, UX, Interaction design, Kung Fu и другие страшные слова
Ить, ни, сан, си, го - беспечен гуляющий заяц...
*

PbICb

  • Захожу иногда
  • 66
  • 38 / 0
  • Мяфф...)
Re: Выравнивание по вертикали
« Ответ #7 : 05.04.2008, 10:44:25 »
Вы опять уходите от темы )) Повторюсь - мое решение было приведено в рамках заданного вопроса. А проекты встречаются разные и с различными техническими требованиями - так что данный вариант имеет право на существование.
UI, UX, Interaction design, Kung Fu и другие страшные слова
Ить, ни, сан, си, го - беспечен гуляющий заяц...
*

sc@r@bey

  • Захожу иногда
  • 360
  • 55 / 5
  • делай, а потом спрашивай что не получилось!
Re: Выравнивание по вертикали
« Ответ #8 : 23.05.2009, 01:12:44 »
вот ищи решение здесь  ;)
_http://cssing.org.ua/2007/04/26/another-css-valign-method/
_http://cssing.org.ua/2005/07/14/vertical-align-middle/

вот здесь посмотри и по вертикали и по горизонтали выровнял нижнее меню mkcnovoship.ru
« Последнее редактирование: 23.05.2009, 02:43:14 от sc@r@bey »
*

sectus

  • Новичок
  • 8
  • 0 / 0
Re: Выравнивание по вертикали
« Ответ #9 : 01.12.2009, 08:36:50 »
PbICb, спасибо способ отличный.
Только # лучше заменить на _, так будет валиднее.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вертикальное выравнивание текста внутри textarea [РЕШЕНО]

Автор dm-krv

Ответов: 11
Просмотров: 6738
Последний ответ 23.03.2019, 21:53:08
от sivers
Вертикальное выравнивание

Автор dmtn

Ответов: 1
Просмотров: 1416
Последний ответ 28.12.2017, 12:52:12
от dmtn
Как выровнять строку по вертикали (header)?

Автор Ferum1

Ответов: 4
Просмотров: 1128
Последний ответ 13.10.2016, 10:35:36
от Ferum1
Выравнивание блоков по высоте

Автор BrutalMan

Ответов: 6
Просмотров: 1475
Последний ответ 08.08.2016, 06:30:15
от neogeek
Выравнивание и закрепление меню

Автор zotchiy

Ответов: 4
Просмотров: 1211
Последний ответ 25.03.2016, 15:40:16
от Shustry