Выравнивание блока по центру

@QuickDark · Регистрация: 17.11.2015

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

Продолжаем рубрику: вопросы от тупорезов) Не могу выравнить блок, который должен висеть над картой по центру, margin: 0 auto не работает(и padding bottom, кстати, тоже) На данный момент нужный блок приткнут к верхнему левому углу карты.

HTML5
1
2
3
4
5
6
7
8
9
10
<section class="mapsect">
            <div class="ctwrap">
                <div class="cntcts">
                </div>
            </div>
            <div class="mapwrapper">
                <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=HDqTMlOUPy7R2fhQPtapiDFu8vPzTjeV&amp;width=100%25&amp;height=297&amp;lang=ru_RU&amp; disableDragging()scroll=true">
                </script>
            </div>
        </section>

имеются вот такие стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.ctwrap{
    width: 100%;
    position: absolute;
    z-index: 250;
}
.cntcts{
    text-align: center;
    width: 40%;
    height: 150px;
    background-color: rgba(255,255,255,.70);
    position: absolute;
    margin: 0 auto;
    z-index: 250;
    display: block;
}
.mapwrapper{
    z-index: 0;
}

@Kenworth · 08.12.2016, 12:07

CSS
1
2
3
4
5
6
7
8
.cntcts{
    text-align: center;
    width: 40%;
    height: 150px;
    background-color: rgba(255,255,255,.70);
      position: relative;
      margin: 0 auto;
}

Либо

CSS
1
2
3
4
5
6
7
8
9
.cntcts{
    text-align: center;
    width: 40%;
    height: 150px;
    background-color: rgba(255,255,255,.70);
      position: relative;
      left: 50%;
      transform: translateX(-50%);
}

@mrtoxas · 08.12.2016, 12:27

Kenworth, не стоит двигать по странице блок, который имеет относительное позиционирование. Потому что, это его сдвигает только визуально, но в потоке он остается на своем месте. Это вызовет сложности при дальнейшей верстке. Например, в данном примере, блок визуально уехал в центр, но на поле поиска и кнопку, уже не нажмешь, т.к. браузер считает, что блок никуда не двигался и он перекрывает форму. Если есть необходимость сдвигать элемент, придаем ему абсолютное позицицирование и двигаем куда угодно.
QuickDark, для элемента с абсолютным позиционированием не достаточно указать margin:0 auto.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.ctwrap{
    width: 100%;
    position: relative;
    z-index: 250;
}
.cntcts{
    text-align: center;
    width: 40%;
    height: 150px;
    background-color: rgba(255,255,255,.70);
    position: absolute;
    top:0; left:0; right:0;
    margin: 0 auto;
    z-index: 250;    
}
.mapwrapper{
    z-index: 0;
}

@QuickDark · 08.12.2016, 14:53 **[ТС]**

mrtoxas, Очень сильно выручили, спасибо огромное!

Добавлено через 38 минут
mrtoxas, А почму padding-top так и не реагирует?)

@mrtoxas · 08.12.2016, 15:03

QuickDark, уберите фиксированную высоту и будет работать.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Выравнивание блока по центру

Решение

Решение

@QuickDark 0 / 0 / 1 Регистрация: 17.11.2015 Сообщений: 83
	08.12.2016, 14:53 [ТС]
	mrtoxas, Очень сильно выручили, спасибо огромное! Добавлено через 38 минут mrtoxas, А почму padding-top так и не реагирует?) 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.12.2016, 15:03
	Сообщение было отмечено QuickDark как решение Решение QuickDark, уберите фиксированную высоту и будет работать. 1