X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Помогите решить задачу
khlebnikov
khlebnikov
Topic Starter сообщение 8.6.2013, 15:06; Ответить: khlebnikov
Сообщение #1


http://htmlbook.ru/practical/formula-po-tsentru

В принципе формально я ее решил: http://jsfiddle.net/ufrWx/1/
Но там вертикально выравнивание текста я сделал при помощи line-height, исходя из конкретной высоты блока контейнера, совпадающей с высотой формулы-картинки.
Так что если в этот код вставить другое изображение (с другой высотой), то вертикального выравнивания по середине не будет. То же самое будет наблюдаться, если вместо line-height использовать margin или padding.

Как выровнять тут текст по вертикали, не задавая ни высоту внешнего блока, ни line-height и не применяя margin или padding? Короче нужно универсальное решение, которое не приходилось бы менять, вставляя новую картинку с формулой.

Способы vertical-align и top:50% у меня не сработали.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 8.6.2013, 19:16; Ответить: Den1xxx
Сообщение #2


(khlebnikov @ 8.6.2013, 18:06) *
Способы vertical-align и top:50% у меня не сработали.

Не смешно, там же решение есть.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
Topic Starter сообщение 9.6.2013, 5:56; Ответить: khlebnikov
Сообщение #3


Там решение идет тоже с неявным использованием marginов у абзаца <p class="num"> (Действуют marginы, присутствующие у него по умолчанию).

Поэтому в первоначальном варианте вроде как все нормально: http://jsfiddle.net/9umZN/ (Для наглядности я задал фоновый цвет у внешнего diva)

Но если аннулировать marginы у класса .num, то результат будет уже таким: http://jsfiddle.net/rfHyR/

Понятно, что margin-top, которое задается браузером по умолчанию - величина постоянная и не зависит от содержимого внешнего блока, или каких-либо других обстоятельств. (По моим прикидкам этот margin-top по умолчанию равен 16 пикселям). Поэтому вот, что произойдет, если вставить в приведенное на сайте решение другую картинку (с другой высотой): http://jsfiddle.net/82ACR/

В общем, там приведено плохое решение, которое требует осуществлять подгонку каждый раз, когда вставляется новая картинка. Я бы не хотел такое решение применять в верстке.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gen-5
gen-5
сообщение 9.6.2013, 21:58; Ответить: gen-5
Сообщение #4


для img и span {display: inline-block;vertical-align:middle;}

для main убераете высоту и float что вы применяли для span

вот решение, там уже доверстаете как вам надо, суть изложил. И если по inline-block в IE7 , разберите самостоятельно посредством гугла.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
Topic Starter сообщение 10.6.2013, 2:58; Ответить: khlebnikov
Сообщение #5


gen-5, так-то оно, конечно, так: http://jsfiddle.net/tdhdU/

Но тогда нет выравнивания номера по правому краю. А я не вижу другого способа реализовать это выравнивание, как только при помощи float:right. Но в этом случае уже исчезает вертикальное выравнивание.

Хотя, наверное, в реальной ситуации правильнее все-таки не прижимать номер к краю страницы, все равно хотелось бы решить эту задачу так, как она была сформулирована. Или хотя бы узнать решаема ли она вообще на одних только HTML и CSS.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gen-5
gen-5
сообщение 10.6.2013, 12:46; Ответить: gen-5
Сообщение #6


можно и по правому краю, я суть вам написл. просто там надо разметку поменять ещё больше, у меня времени не было..... <div class="wrap"><div class="col"><img></div><div class="col"><span></span></div></div> Для всех тегов - display:inline-block;vertical-align:middle; кроме .wrap
Для класса .col {displa:inline-block;vertical-align:middle;text-align:right;width:49%;}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
webslicer
webslicer
сообщение 10.6.2013, 12:57; Ответить: webslicer
Сообщение #7


:wacko:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
Topic Starter сообщение 10.6.2013, 19:01; Ответить: khlebnikov
Сообщение #8


(gen-5 @ 10.6.2013, 15:46) *
можно и по правому краю, я суть вам написл. просто там надо разметку поменять ещё больше, у меня времени не было..... <div class="wrap"><div class="col"><img></div><div class="col"><span></span></div></div> Для всех тегов - display:inline-block;vertical-align:middle; кроме .wrap
Для класса .col {displa:inline-block;vertical-align:middle;text-align:right;width:49%;}


Ну как-то так: http://jsfiddle.net/ganf2/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
gen-5
gen-5
сообщение 10.6.2013, 19:23; Ответить: gen-5
Сообщение #9


задча выполненна, или нет? не вижу возгласов радости..... Я вижу,что всё получилось...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
khlebnikov
khlebnikov
Topic Starter сообщение 10.6.2013, 19:51; Ответить: khlebnikov
Сообщение #10


Спасибо! Но формула все равно не по центру (по центру ее правый край, а не середина). Я уже и через фон пытался картинку установить, и сместить этот фон ровно наполовину его длины. Но только так ни фига не получается.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Помогите рещить проблему с монитором.
Почему низкое разрешение при подключении монитора через displayport?
0 Levels 1695 11.12.2020, 0:48
автор: Levels
Открытая тема (нет новых ответов) Помогите кто нибудь получить партнерку Росбанк!
7 heisenberg_mw 2315 7.8.2020, 9:28
автор: heisenberg_mw
Открытая тема (нет новых ответов) Помогите найти тему пожалуйста
7 virtas 12402 24.7.2020, 17:02
автор: -JamesSmips-
Открытая тема (нет новых ответов) Помогите с поиском доноров
3 tehno_music 3332 4.11.2019, 17:15
автор: goblin78


 



RSS Текстовая версия Сейчас: 29.3.2024, 2:00
Дизайн