Расположение блоков div по центру

@Алерон · Регистрация: 13.10.2009

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

Как разместить все блоки div по центру? Игрался с float и position, но ничего не получилось. Не понимаю как работать с процентным отношением(float: 50%)ю

HTML5
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Задание 1</title>
    <style type="text/css">
    body{
    margin:0px;
    background:black;}
   #H1 { 
    background:red;
    width:250px;
    height:100px;
    position:absolute;
   }
   #H2 { 
    background:yellow;
    width:250px;
    height:100px;
    left:250px;
    position:absolute;
    line-height:100px;
    text-align:center;
   }
   #H3 { 
    background:green;
    width:250px;
    height:100px;
    left:500px;
    position:absolute;
    line-height:100px;
    text-align:center;
   }
   #menu {
    background:blue;
    font-weight: bold;
    color: white;
    line-height:25px;
    width:750px;
    height:25px;
    top:100px;
    position:absolute;
   }
   #submenu {
    background:DodgerBlue;
    width:250px;
    height:350px;
    top:125px;
    position:absolute;
   }
   #info {
    background:GreenYellow;
    width:500px;
    height:350px;
    top:125px;
    position:absolute;
    left:250px;
    overflow:auto;
   }
   #textleft {
    background:GreenYellow;
    width:150px;
    height:100px;
    top:475px;
    position:absolute;
    float:top;
   }
   #pictureb {
   background:GreenYellow;
    width:450px;
    height:100px;
    top:475px;
    position:absolute;
    left:150px;
   }
   #textright {
   background:GreenYellow;
    width:150px;
    height:100px;
    top:475px;
    position:absolute;
    left:600px;
   }
   
  </style>
    </head>
    <body>
    <div id="H1"><img src="C:\Users\Alex\Desktop\bd7VJ.png" width="250px" height="100px alt="picture></div>
    <div id="H2">Работа с блоками</div>
    <div id="H3">Фамилия Имя Отчество</div>
    <div id="menu">Главная \/ Информация \/ Изображение</div>
    <div id="submenu">nemu menu menu</div>
    <div id="info"><p>C++ — компилируемый статически типизированный язык программирования общего назначения.
 
Поддерживает такие парадигмы программирования как процедурное программирование, объектно-ориентированное программирование, обобщённое программирование, обеспечивает модульность, раздельную компиляцию, обработку исключений, абстракцию данных, объявление типов (классов) объектов, виртуальные функции. Стандартная библиотека включает, в том числе, общеупотребительные контейнеры и алгоритмы. C++ сочетает свойства как высокоуровневых, так и низкоуровневых языков[1]. В сравнении с его предшественником — языком C, — наибольшее внимание уделено поддержке объектно-ориентированного и обобщённого программирования[2].
 
C++ широко используется для разработки программного обеспечения, являясь одним из самых популярных языков программирования[мнения 1][мнения 2]. Область его применения включает создание операционных систем, разнообразных прикладных программ, драйверов устройств, приложений для встраиваемых систем, высокопроизводительных серверов, а также развлекательных приложений (игр). Существует множество реализаций языка C++, как бесплатных, так и коммерческих и для различных платформ. Например, на платформе x86 это GCC, Visual C++, Intel C++ Compiler, Embarcadero (Borland) C++ Builder и другие. C++ оказал огромное влияние на другие языки программирования, в первую очередь на Java и C#.
 
Синтаксис C++ унаследован от языка C. Одним из принципов разработки было сохранение совместимости с C. Тем не менее, C++ не является в строгом смысле надмножеством C; множество программ, которые могут одинаково успешно транслироваться как компиляторами C, так и компиляторами C++, довольно велико, но не включает все возможные программы на C.
</p></div>
    <div id="textleft">Сдесь находится текст для левого блока</div>
    <div id="pictureb"><img src="C:\Users\Alex\Desktop\cp02.png" width="450px" height="100px alt="picture></div>
    <div id="textright">Сдесь находится текст для правого блока</div>
    </body>

@Monster-95 · 25.04.2015, 11:30

Алерон, Ваш код настолько безобразен что больно на него смотреть, с такой версткой вам помочь настолько сложно что даже не знаю что делать, набрать все с нуля или же попытаться как то использовать margin: 0 auto;

@Fedor92 · 25.04.2015, 12:12

Алерон, специально для любителей абсолютного позиционирования:

Кликните здесь для просмотра всего текста

HTML5
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Задание 1</title>
    <style type="text/css">
    body{
    margin:0px;
    background:black;}
    #main{margin: 0 auto; width:750px; position:relative}
   #H1 { 
    background:red;
    width:250px;
    height:100px;
    position:absolute;
   }
   #H2 { 
    background:yellow;
    width:250px;
    height:100px;
    left:250px;
    position:absolute;
    line-height:100px;
    text-align:center;
   }
   #H3 { 
    background:green;
    width:250px;
    height:100px;
    left:500px;
    position:absolute;
    line-height:100px;
    text-align:center;
   }
   #menu {
    background:blue;
    font-weight: bold;
    color: white;
    line-height:25px;
    width:750px;
    height:25px;
    top:100px;
    position:absolute;
   }
   #submenu {
    background:DodgerBlue;
    width:250px;
    height:350px;
    top:125px;
    position:absolute;
   }
   #info {
    background:GreenYellow;
    width:500px;
    height:350px;
    top:125px;
    position:absolute;
    left:250px;
    overflow:auto;
   }
   #textleft {
    background:GreenYellow;
    width:150px;
    height:100px;
    top:475px;
    position:absolute;
    float:top;
   }
   #pictureb {
   background:GreenYellow;
    width:450px;
    height:100px;
    top:475px;
    position:absolute;
    left:150px;
   }
   #textright {
   background:GreenYellow;
    width:150px;
    height:100px;
    top:475px;
    position:absolute;
    left:600px;
   }
   
  </style>
    </head>
    <body>
<div id="main">
    <div id="H1"><img src="C:\Users\Alex\Desktop\bd7VJ.png" width="250px" height="100px alt="picture></div>
    <div id="H2">Работа с блоками</div>
    <div id="H3">Фамилия Имя Отчество</div>
    <div id="menu">Главная \/ Информация \/ Изображение</div>
    <div id="submenu">nemu menu menu</div>
    <div id="info"><p>C++ — компилируемый статически типизированный язык программирования общего назначения. Поддерживает такие парадигмы программирования как процедурное программирование, объектно-ориентированное программирование, обобщённое программирование, обеспечивает модульность, раздельную компиляцию, обработку исключений, абстракцию данных, объявление типов (классов) объектов, виртуальные функции. Стандартная библиотека включает, в том числе, общеупотребительные контейнеры и алгоритмы. C++ сочетает свойства как высокоуровневых, так и низкоуровневых языков[1]. В сравнении с его предшественником — языком C, — наибольшее внимание уделено поддержке объектно-ориентированного и обобщённого программирования[2].
    C++ широко используется для разработки программного обеспечения, являясь одним из самых популярных языков программирования[мнения 1][мнения 2]. Область его применения включает создание операционных систем, разнообразных прикладных программ, драйверов устройств, приложений для встраиваемых систем, высокопроизводительных серверов, а также развлекательных приложений (игр). Существует множество реализаций языка C++, как бесплатных, так и коммерческих и для различных платформ. Например, на платформе x86 это GCC, Visual C++, Intel C++ Compiler, Embarcadero (Borland) C++ Builder и другие. C++ оказал огромное влияние на другие языки программирования, в первую очередь на Java и C#.
    Синтаксис C++ унаследован от языка C. Одним из принципов разработки было сохранение совместимости с C. Тем не менее, C++ не является в строгом смысле надмножеством C; множество программ, которые могут одинаково успешно транслироваться как компиляторами C, так и компиляторами C++, довольно велико, но не включает все возможные программы на C.
    </p></div>
    <div id="textleft">Сдесь находится текст для левого блока</div>
    <div id="pictureb"><img src="C:\Users\Alex\Desktop\cp02.png" width="450px" height="100px alt="picture></div>
    <div id="textright">Сдесь находится текст для правого блока</div>
</div>
</body>
</html>

@Jho · 25.04.2015, 20:01

Почему многие тут пишут стили в <style>?
Это же,блин,код захламляет.
А по вопросу - то да,margin:auto если 1 <div> и float-ами,если несколько.
Ну или свойство position

@MVS76 · 25.04.2015, 20:19

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

Почему многие тут пишут стили в <style>?
Это же,блин,код захламляет.

Как это захламляет? Это наоборот очень сильно разгружает код, к тому-же один параметр можно применить к нескольким блокам, ссылкам и тд.
И плюс ко всему быстрое редактирование/правка кода.

Новые блоги и статьи Все статьи Все блоги /
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 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
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 была полностью переписана на Си, в. . .

@Monster-95 53 / 53 / 26 Регистрация: 05.02.2013 Сообщений: 288
	25.04.2015, 11:30
	Алерон, Ваш код настолько безобразен что больно на него смотреть, с такой версткой вам помочь настолько сложно что даже не знаю что делать, набрать все с нуля или же попытаться как то использовать margin: 0 auto; 0

@Jho 9 / 9 / 5 Регистрация: 16.04.2015 Сообщений: 53
	25.04.2015, 20:01
	Почему многие тут пишут стили в <style>? Это же,блин,код захламляет. А по вопросу - то да,margin:auto если 1 <div> и float-ами,если несколько. Ну или свойство position 0