Вертикальное выравнивание внутри div

@riptup · Регистрация: 25.04.2014

Студворк — интернет-сервис помощи студентам

Есть блок .blockTop, высота не задана, формируется от контента. Внутри него еще 3 блока, одному задал float: left;, второму float: right;, оба у них ширина задана в процентах, а третьему блоку .banner задал свойство display: inline-block; и шириной 503px, высотой 95px (фиксированный размер).

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

И еще вопрос...
Инлайн-блокам лучше указывать высоту в line-height, или просто height? Заранее спасибо!

@fjay69 · 14.10.2014, 17:48

line-height - это высота линии текста. То есть если в блоке несколько строк текста, высота будет отличаться. Если вам нужна фиксированная высота - используйте height.
Что касается задачи... Неплохо бы проиллюстрировать, т.к. ничего не понятно.

@Fedor92 · 14.10.2014, 17:56

line-height - это междустрочный интервал... Его используют для выравнивания блоков... Я видел пример, где блоку задавалось line-height:44 и он выравнивался по центру, но не помню блок фиксированный был или нет... А что касается высоты свойство top в помощь...

@fjay69 · 14.10.2014, 17:57

Могу предположить, что вам нужно вертикальное выравнивание .banner относительно .blockTop, при этом игнорируя блоки с обтеканием?

@riptup · 14.10.2014, 18:32 **[ТС]**

Почти угадали

Попробую объяснить. Если взглянуть на эти картинки, то можно увидеть, если окно браузера сужаю, то от нижнего края баннера до blockTop 115px, если растянуть, то блок news уменьшается по высоте, соответственно и blockTop по уже, у баннера в таком положении уже 49px. От верха баннера расстояние всегда одинаковое.

А как сделать чтобы баннер всегда был по центру? Вот вопрос... 3 дня искал в гулге каждый день по чуть чуть, чтобы темы не засерать, но видимо, не очень получается... Ну да ладно)))

http://bit.ly/1vr1apR
http://bit.ly/1w4AWq6

На всяк случай исходники))
https://yadi.sk/d/lKYVC5unc238H

Добавлено через 11 минут
Также принимаю любую критику по верстке

@Fedor92 · 14.10.2014, 18:51

Брым-брым...

@riptup · 14.10.2014, 19:35 **[ТС]**

Сообщение от Fedor92

Брым-брым...

Ну колись как сделал?)

@fjay69 · 15.10.2014, 09:37

Есть предложение: чтобы blockTop реагировал на высоту блоков внутри, нужно в конце blockTop поставить <div style="clear: both"></div>. Удачи!

@riptup · 15.10.2014, 10:45 **[ТС]**

Сообщение от fjay69

Есть предложение: чтобы blockTop реагировал на высоту блоков внутри, нужно в конце blockTop поставить <div style="clear: both"></div>

Нет, не правильно поняли... Сам баннер всегда должен быть по центру. Блоки в blockTop все резиновые и растягиваются за счет контента. Поэтому и blockTop расширяется и уменьшается высота, при этом проблема как раз в том, как сделать чтобы баннер всегда был по центру, независимо увеличивается blockTop по высоте за счет внутри него резиновых блоков или нет...

Все равно спасибо за совет! C clear вроде дружу и с его свойствами

@Fedor92 · 15.10.2014, 11:32

Если баннер плавать не должен, а только висеть добавь к своему коду:

HTML5
1
2
3
4
<div style="float:left; width:305px; height:100%; display:table;">
    <div class="banner" style="float:left; width:305px; height:35px; display:table-cell; vertical-align:middle">
        ghjgfjgjg
    </div>

И будет тебе счастье...

@riptup · 15.10.2014, 12:53 **[ТС]**

Сообщение от Fedor92

И будет тебе счастье...

Запятую забыл поставить - vertical-align:middle".
Как было так ничего и не поменялось

даже полностью удалил .banner в css, пробовал по разному.
http://gyazo.com/c8a925d734337394e0a1abf418253124

@Fedor92 · 15.10.2014, 13:17

Не вопрос лови весь код...

@riptup · 15.10.2014, 15:16 **[ТС]**

Баннер то не по центру)) Как было так и осталось....
У баннера то отступ от топ фиксированный, а я хочу получить на выходе резиновый отступ... Резиновое позиционирование если можно так назвать... При уменьшении страницы в браузере высота левого float становится больше, поэтому баннер как бы должен быть живой, всегда стоял строго по центру)))

CSS
1
2
3
4
5
6
7
.banner {
    display: inline-block;
    width: 503px;
    height: 95px;
    margin: 50px 0 0 5px;
    outline: 1px solid #c0c0cc;
}

Добавлено через 5 минут
Думал создать еще 1 div и задать ему height: 100%, поместив в него баннер и прописал некие свойства. Тока чтобы этот блок занимал всю высоту главного блока, нужно хз что сделать в моем случае... Или может другие варианты есть

@Fedor92 · 15.10.2014, 15:34

Я чего-то либо недопонимаю, а что самого начала Вам мешало сделать отступ margin-top и пересчитать его на проценты - это первое замечание... Второе -это вёрстка... Собсно говоря...

@riptup · 15.10.2014, 15:50 **[ТС]**

margin-top в процентах ставил в самом начале, что только не ставил... Зато и прошу помощи на форуме.

@Fedor92 · 15.10.2014, 16:05

Ваша вёрстка не позволяет его прорезинить...

@Fedor92 · 15.10.2014, 16:12

Примерно так должна выглядеть Ваша вёрстка по блокам... В общих чертах... Тогда можно будет поговорить о наших тараканах

@riptup · 15.10.2014, 16:14 **[ТС]**

Сообщение от Fedor92

Ваша вёрстка не позволяет его прорезинить...

Позвольте спросить из за чего? Нужно всем родителям ставить 100% высоты, или вы намекаете на табличную верстку?

Как по вашему надо было делать? Вкратце))

@Fedor92 · 15.10.2014, 16:15

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

@riptup · 15.10.2014, 16:18 **[ТС]**

А потом блок регистрации с позиционировать получается...

Добавлено через 1 минуту

Сообщение от Fedor92

Смотрите

О, спасибо! Попробуем))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@riptup 0 / 0 / 0 Регистрация: 25.04.2014 Сообщений: 28

	Вертикальное выравнивание внутри div 14.10.2014, 14:47. Показов 4838. Ответов 22 Метки нет (Все метки) Есть блок .blockTop, высота не задана, формируется от контента. Внутри него еще 3 блока, одному задал float: left;, второму float: right;, оба у них ширина задана в процентах, а третьему блоку .banner задал свойство display: inline-block; и шириной 503px, высотой 95px (фиксированный размер). В общем нужен такой эффект, чтобы блок с фиксированной шириной, менял позицию в смысле чтобы всегда был по центру от верхнего края и нижнего в блоке .blockTop при уменьшении или расширении окна браузера. И еще вопрос... Инлайн-блокам лучше указывать высоту в line-height, или просто height? Заранее спасибо! 0

@fjay69 90 / 90 / 17 Регистрация: 26.10.2012 Сообщений: 249
	14.10.2014, 17:48
	line-height - это высота линии текста. То есть если в блоке несколько строк текста, высота будет отличаться. Если вам нужна фиксированная высота - используйте height. Что касается задачи... Неплохо бы проиллюстрировать, т.к. ничего не понятно. 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.10.2014, 17:56
	line-height - это междустрочный интервал... Его используют для выравнивания блоков... Я видел пример, где блоку задавалось line-height:44 и он выравнивался по центру, но не помню блок фиксированный был или нет... А что касается высоты свойство top в помощь... 1

@fjay69 90 / 90 / 17 Регистрация: 26.10.2012 Сообщений: 249
	14.10.2014, 17:57
	Могу предположить, что вам нужно вертикальное выравнивание .banner относительно .blockTop, при этом игнорируя блоки с обтеканием? 0

@riptup 0 / 0 / 0 Регистрация: 25.04.2014 Сообщений: 28
	14.10.2014, 18:32 [ТС]
	Почти угадали Попробую объяснить. Если взглянуть на эти картинки, то можно увидеть, если окно браузера сужаю, то от нижнего края баннера до blockTop 115px, если растянуть, то блок news уменьшается по высоте, соответственно и blockTop по уже, у баннера в таком положении уже 49px. От верха баннера расстояние всегда одинаковое. А как сделать чтобы баннер всегда был по центру? Вот вопрос... 3 дня искал в гулге каждый день по чуть чуть, чтобы темы не засерать, но видимо, не очень получается... Ну да ладно))) http://bit.ly/1vr1apR http://bit.ly/1w4AWq6 На всяк случай исходники)) https://yadi.sk/d/lKYVC5unc238H Добавлено через 11 минут Также принимаю любую критику по верстке 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.10.2014, 18:51
	Брым-брым... Миниатюры 0

@fjay69 90 / 90 / 17 Регистрация: 26.10.2012 Сообщений: 249
	15.10.2014, 09:37
	Есть предложение: чтобы blockTop реагировал на высоту блоков внутри, нужно в конце blockTop поставить <div style="clear: both"></div>. Удачи! 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2014, 15:34
	Я чего-то либо недопонимаю, а что самого начала Вам мешало сделать отступ margin-top и пересчитать его на проценты - это первое замечание... Второе -это вёрстка... Собсно говоря... 0

@riptup 0 / 0 / 0 Регистрация: 25.04.2014 Сообщений: 28
	15.10.2014, 15:50 [ТС]
	margin-top в процентах ставил в самом начале, что только не ставил... Зато и прошу помощи на форуме. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2014, 16:05
	Ваша вёрстка не позволяет его прорезинить... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2014, 16:12
	Примерно так должна выглядеть Ваша вёрстка по блокам... В общих чертах... Тогда можно будет поговорить о наших тараканах Миниатюры 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2014, 16:15
	Смотрите пост Выше я прорисовал порядок расположения блоков и их вложенность друг в друга... Каждый блок выделил индивидуально по цвету... Некоторые цвета повторяются, но это только для того, чтобы было понятно где границы блока... 0