Как обрезать сайт по ширине равномерно с двух сторон

@DmytroD · Регистрация: 25.03.2015

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

Помогите уже нет сил! Есть сайт шириной 1920px и есть контент шириной 1110px вопрос в том как сделать так чтобы при изменении разрешения экрана сайт обрезался равномерно справа и слева до ширины контента 1110px?

Html:

HTML5
1
2
3
4
5
6
7
8
<body>
<div class="top_wrapper center">
    <div class="header"></div>
        <div class="wrapper center">
            <div class="logo center"><img src="img/logo_yo2.png"/></div>
        </div>
</div>
</body>

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
    min-width: 1100px;
    overflow-x: hidden;
}
.top_wrapper{
    width: 1920px;
    background-image: url("../img/header.png");
    background-repeat: no-repeat;
    background-position: top center;
    min-width: 1100px;
}
.wrapper{
    width: 1110px;
    position: relative;
}
.center{
    margin: 0 auto;
}
.header{
    height: 573px;
    width: 1920px;
 }
.logo{
    width: 363px;
    margin-bottom: -33px;
    margin-top: -187px;
    margin-left: 350px;
}

@ludmila-sv · 25.03.2015, 17:28

CSS
1
2
3
4
5
.wrapper{
width: 1110px;
position: relative;
margin: 0 auto;
}

Добавлено через 10 минут
Ой, прошу прощения, проглядела класс center.

Добавлено через 21 минуту
Тогда так:
добавить еще один див, позиционированный абсолютно

HTML5
1
2
3
4
5
6
7
8
9
10
<body>
<div class="top_wrapper center">
<div class="header"></div>
<div class="wrapper2">
<div class="wrapper center">
<div class="logo center"><img src="img/logo_yo2.png"/></div>
</div>
</div>
</div>
</body>

CSS
1
2
3
4
5
.wrapper2{
height: 100%;
width: 100%;
position: absolute;
}

Проблема была в том, что .wrapper позиционировался по центру .top_wrapper, а не по центру экрана.
.wrapper2 как бы заменяет собой экран.

@DmytroD · 25.03.2015, 18:33 **[ТС]**

Все оказалось проще, у .top_wrapper был указан width, всем спасибо!

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@DmytroD 0 / 0 / 0 Регистрация: 25.03.2015 Сообщений: 2
	25.03.2015, 18:33 [ТС]
	Все оказалось проще, у .top_wrapper был указан width, всем спасибо! 0