Как центрировать блок?

@VadimuSSS · Регистрация: 23.06.2014

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

вот такой вот банальный вопрос. думаю центрировать див, путем position:absolute, как это делаю я - не вариант...

@KlassT · 18.08.2014, 04:05

margin: 0 auto; но при этом нужно указывать ширину блока

Добавлено через 3 минуты
Можно так

HTML5
1
2
3
4
5
<div class="parent">
<div class="child">
Hello, World!
</div>
</div>

CSS
1
2
3
4
5
6
7
.parent {
text-align: center;
}
 
.child {
display: inline-block;
}

@-MaZaHaKa- · 18.08.2014, 04:18

Я обычно делаю так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
body {
background-image: url(../images/bg.png);
background-size: 100%;
background-attachment: fixed;
}
 
div.wrapper {
width: 1000px;
margin: 20px auto;
background-color: #ffffff;
height: 100px;
}

@N3stY · 18.08.2014, 16:47

KlassT, Что?! это что за зверь такой? Вы вставили блок в блок и все, на деле внутренний блок растянется по размерам внутреннего.

Другими словами вы ничего не добьетесь, а текст центрировать в данном случаи незачем, ИМХО такое не годится.

Добавлено через 1 минуту
VadimuSSS, где его центрировать нужно?

@KlassT · 18.08.2014, 19:26

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

Что?! это что за зверь такой? Вы вставили блок в блок и все, на деле внутренний блок растянется по размерам внутреннего.
Другими словами вы ничего не добьетесь, а текст центрировать в данном случаи незачем, ИМХО такое не годится.

Да, я смотрю, вы гуру вёрстки

Дочерный блок из-за dislpay: inline-block приобретает инлайновые свойства, а именно ширина блока станет равна заполнению и его можно будет центрировать text-align: center;

Добавлено через 44 секунды

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

Что?! это что за зверь такой? Вы вставили блок в блок и все, на деле внутренний блок растянется по размерам внутреннего.
Другими словами вы ничего не добьетесь, а текст центрировать в данном случаи незачем, ИМХО такое не годится.

http://nat-part.ru/ Посмотрите исходный код меню

@VadimuSSS · 18.08.2014, 19:27 **[ТС]**

блок нужно центрировать в основном блоке контейнере. Грубо говоря, просто блок должен быть не прижат к левой стороне как по умолчанию, а быть посередине.

@KlassT · 18.08.2014, 19:39

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

блок нужно центрировать в основном блоке контейнере. Грубо говоря, просто блок должен быть не прижат к левой стороне как по умолчанию, а быть посередине.

Если у блока написана ширина, то margin: auto, иначе мой 2 способ

@Taatshi · 18.08.2014, 19:59

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

на деле внутренний блок растянется по размерам внутреннего

не растянется. inline-block не даст

@Gendra92 · 18.08.2014, 22:39

А просто указать фиксированную ширину блока и добавить параметр margin: 0 auto; не вариант?

@N3stY · 18.08.2014, 23:36

KlassT,

да вы правы насчет "гуру", но всё же пример ваш не сработал, может стоило мне его в браузере проверить, а margin это вариант, я не полностью сначала прочитал пост, извиняюсь

Добавлено через 1 минуту
Taatshi, вывод CSS мне еще подучить нужно

, однако нужно было не текст сцентрировать, а блок.

Добавлено через 1 минуту
А браузер мне сказал что блок ложится поверх блока и центрируется текст, что то inline-block не помог ему понять.

Я обычно центрирую с позишеном

@KlassT · 18.08.2014, 23:54

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

да вы правы насчет "гуру", но всё же пример ваш не сработал, может стоило мне его в браузере проверить, а margin это вариант, я не полностью сначала прочитал пост, извиняюсь

Ну так вы откройте блокнот. Создайте файл и проверьте

@N3stY · 19.08.2014, 16:23

KlassT, я не пользуюсь блокнотом, но все же вы правы

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.parent {
    text-align: center;
    background-color: #666;
}
 
.child {
    display: inline-block;
    background-color: #09F;
}
</style>
 
 
<div class="parent">
<div class="child">
Hello, World!
</div>
</div>

Не знал об этом методе центрирования

@N3stY · 19.08.2014, 16:25

Ценная информация

@Taatshi · 20.08.2014, 08:06

N3stY, шестой осел не понимал maargin:0 auto - этим способом ему мозги на место ставили

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 Использованы. . .

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167

	Как центрировать блок? 18.08.2014, 02:33. Показов 3724. Ответов 13 Метки нет (Все метки) вот такой вот банальный вопрос. думаю центрировать див, путем position:absolute, как это делаю я - не вариант... 0

@N3stY (ノಠ益ಠ)ノ彡┻━┻ 152 / 152 / 78 Регистрация: 05.06.2014 Сообщений: 710 Записей в блоге: 2
	18.08.2014, 16:47
	KlassT, Что?! это что за зверь такой? Вы вставили блок в блок и все, на деле внутренний блок растянется по размерам внутреннего. Другими словами вы ничего не добьетесь, а текст центрировать в данном случаи незачем, ИМХО такое не годится. Добавлено через 1 минуту VadimuSSS, где его центрировать нужно? 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	18.08.2014, 19:27 [ТС]
	блок нужно центрировать в основном блоке контейнере. Грубо говоря, просто блок должен быть не прижат к левой стороне как по умолчанию, а быть посередине. 0

@Gendra92 0 / 0 / 0 Регистрация: 18.08.2014 Сообщений: 5
	18.08.2014, 22:39
	А просто указать фиксированную ширину блока и добавить параметр margin: 0 auto; не вариант? 0

@N3stY (ノಠ益ಠ)ノ彡┻━┻ 152 / 152 / 78 Регистрация: 05.06.2014 Сообщений: 710 Записей в блоге: 2
	18.08.2014, 23:36
	KlassT, да вы правы насчет "гуру", но всё же пример ваш не сработал, может стоило мне его в браузере проверить, а margin это вариант, я не полностью сначала прочитал пост, извиняюсь Добавлено через 1 минуту Taatshi, вывод CSS мне еще подучить нужно, однако нужно было не текст сцентрировать, а блок. Добавлено через 1 минуту А браузер мне сказал что блок ложится поверх блока и центрируется текст, что то inline-block не помог ему понять. Я обычно центрирую с позишеном 0

@N3stY (ノಠ益ಠ)ノ彡┻━┻ 152 / 152 / 78 Регистрация: 05.06.2014 Сообщений: 710 Записей в блоге: 2
	19.08.2014, 16:25
	Ценная информация 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	20.08.2014, 08:06
	N3stY, шестой осел не понимал maargin:0 auto - этим способом ему мозги на место ставили 0