Центрирование блоков

@Hitman73 · Регистрация: 31.01.2012

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

Помогите разобраться. Нужно отцентрировать блок с шапкой(head) относительно общего блока(wrapper). В данном случае "margin:0 auto" не работает, да и вообще я не могу понять когда он работает, а когда нет. Общий блок центрируется нормально, видно по коду. Пробовал указывать ширину дочернего блока, безрезультатно. Буду благодарен за внятное объяснение.

ЗЫ Я только учусь

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Позиционирование</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div  id='wrapper'>
            <div id='logo'>
                <div class='logo'>
                    <img src='images/logo.jpg' alt='Логотип'>
                </div>
                <div class='logotext'>
                    <span class='blue'>Grafix</span><span class='dark'>Corp</span>
                </div>
                <div class='tel'>
                    <span class='grey'>Call:</span><span class='dark'>123-456-7890</span>
                </div>
            </div>
            <div id='topmenu'>
                <table>
                    <tr>
                        <td>
                            <a href='#' class='active'>Home</a>
                        </td>
                        <td>
                            <a href='#'>About Us</a>
                        </td>
                        <td>
                            <a href='#'>Services</a>
                        </td>
                        <td>
                            <a href='#'>Products</a>
                        </td>
                        <td>
                            <a href='#'>Testimonials</a>
                        </td>
                        <td>
                            <a href='#'>Blog</a>
                        </td>
                        <td>
                            <a href='#'>Contact Us</a>
                        </td>
                        <td>
                            <select name='language' id='language'>
                                <option>English</option>
                                <option selected>Русский</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div id='head'>
                <img class='head' src='images/head.jpg' alt='Шапка'>
            </div>
        </div>  
    </body>
</html>

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
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
body {
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
}
 
#wrapper {
width:1300px;
margin:0 auto;
}
 
#logo {
width:1300px;
height:80px;
}
 
.logo {
float:left;
}
 
.logotext {
float: left;
font-family: 'Myriad Pro';
font-size: 35px;
margin-left: 18px;
padding-top: 13px;
}
 
.dark {
color:#486AA7;
}
 
.blue {
color:#193867;
}
 
.tel {
font-family: 'Myriad Pro';
font-size: 27px;
margin-left: 721px;
padding-top: 24px;
float: left;
}
 
#topmenu {
background-color:#5C7EBD;
border-radius: 5px;
 
}
 
#topmenu table tr td a {
font-family:'Myriad Pro';
color:#fff;
text-decoration:none;
display:block;
padding:10px 20px;
}
 
#topmenu table tr td a:hover {
background-color:#469AD3;
border-radius: 5px;
 
}
 
#topmenu table tr td a.active {
background-color:#469AD3;
border-radius: 5px;
 
}
 
#language {
background-color: #425C89;
border: medium none;
color: #FFFFFF;
height: 27px;
margin-left: 326px;
width: 247px;
text-align: center;
color:#B0B0B0;
border-radius: 5px;
}
 
#head {
margin:0 auto;
display:block;
}
.head {
margin:0 auto;
}

@maximus2011 · 10.01.2013, 08:08

Что то я не понял, что именно вам нужно центровать. Вроде все правильно. Можно точнее?

Или если вы имеете ввиду саму картинку, тогда можно просто закинуть ее в

HTML5
1
<center><img ........</center>

@Hitman73 · 10.01.2013, 17:23 **[ТС]**

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

Что то я не понял, что именно вам нужно центровать. Вроде все правильно. Можно точнее?

Или если вы имеете ввиду саму картинку, тогда можно просто закинуть ее в

HTML5
1
<center><img ........</center>

Да, именно то, что нужно! Спасибо. Но не могли бы Вы объяснить почему не работает "margin:0 auto"? Получается, что он срабатывает в коде только один раз.

@maximus2011 · 10.01.2013, 17:48

margin:0 auto; срабатывает в том случае, если указана ширина объекта. Тоесть ему нужно от чего то отталкиваться, чтобы понять где центр у браузера. Соответственно, если вы у тега img прописываете в стилях margin:0 auto; тогда прописывайте и ширину. Как то так

@Hitman73 · 10.01.2013, 18:13 **[ТС]**

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

margin:0 auto; срабатывает в том случае, если указана ширина объекта. Тоесть ему нужно от чего то отталкиваться, чтобы понять где центр у браузера. Соответственно, если вы у тега img прописываете в стилях margin:0 auto; тогда прописывайте и ширину. Как то так

В первом посте я упомянул о том, что я пробовал указывать ширину картинки.
Код при этом будет такой:

HTML5
1
2
3
            <div id='head'>
                <img class='head' src='images/head.jpg' alt='Шапка'>
            </div>

CSS
1
2
3
4
5
6
7
8
9
#head {
margin:0 auto;
display:block;
}
 
#head img {
width:300px; /*ширина указана для примера*/
margin:0 auto;
}

@maximus2011 · 10.01.2013, 18:54

Ну да, верно

Нужно этот img в блок div или span заворачивать. Так как для img действует только обтекание align.

Просто я всегда все заворачиваю в блоки, поэтому и написал так, автоматически, не подумав

@Hitman73 · 10.01.2013, 19:32 **[ТС]**

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

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

Ну да, верно

Нужно этот img в блок div или span заворачивать. Так как для img действует только обтекание align.

Просто я всегда все заворачиваю в блоки, поэтому и написал так, автоматически, не подумав

Отлично! Все работает, только дописал display:block для картинки и не стал заворачивать ее в div. А если просто обернуть, то ничего не менялось. Странная штука...

Огромное спасибо за помощь!

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	10.01.2013, 17:48
	margin:0 auto; срабатывает в том случае, если указана ширина объекта. Тоесть ему нужно от чего то отталкиваться, чтобы понять где центр у браузера. Соответственно, если вы у тега img прописываете в стилях margin:0 auto; тогда прописывайте и ширину. Как то так 1

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	10.01.2013, 18:54
	Ну да, верно Нужно этот img в блок div или span заворачивать. Так как для img действует только обтекание align. Просто я всегда все заворачиваю в блоки, поэтому и написал так, автоматически, не подумав 1