Padding выравнивание

@Sir1us · Регистрация: 30.01.2013

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

Не получаться отцентрировать содержания в

CSS
1
2
3
4
5
6
7
8
9
#content{
    position:relative;
    background-color:#f4f4f4;
    background-image:url(image/content_bg.png);
    background-repeat:repeat-y;
    width:730px;
    margin:0px 0px 0 auto;
    padding:20px 0px 20px 0px;
}

при попытки задать padding:20px 20px 20px 20px; сдвигается сам content
в чем моя ошибка?

@Дерек · 11.02.2013, 00:07

Code
1
2
3
4
5
6
7
8
9
10
#content {
    position:relative;
    background-color:#f4f4f4;
    background-image:url(image/content_bg.png);
    background-repeat:repeat-y;
    width:730px;
    margin:0px 0px 0 auto;
    padding:20px 0px 20px 0px;
    text-align: center;
}

@Sir1us · 11.02.2013, 00:34 **[ТС]**

Спасибо Дерик, но это вовсе не-то,
центрировать мне нужно с помощью атрибуты padding

при попытки задать padding:20px 20px 20px 20px; сдвигается сам content

Верхний и нижний отступ работает нормально, задаю боковые, двигает контент ,а не текст который в нем.

@Дерек · 11.02.2013, 01:15

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

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

а вообще, как вариант, отдельно тексту можно задать нужные параметры, типа паддинг, маргин. просто текст обернуть в другой div и ему задать эти параметры.

@Sir1us · 11.02.2013, 01:26 **[ТС]**

паддинг ничего не центрирует.

Делает внутренний отступ от краев, им же можно и центрировать текст.

обернуть в другой div

У меня сейчас так и выставлено, но хотелось бы знать почему через padding самого контента не центрирует?
Ладно, все равно спасибо за помощь.

@Дерек · 11.02.2013, 02:23

паддинг ничего не центрирует!!!
ничего нельзя им центрировать.
паддинг - это отступ!
отступ, он и в африке - отступ, а не центрирование.

@sheila · 11.02.2013, 04:26

возможно padding не центрирует, потому, что контенту не задан

CSS
1
display:block;

а вообще текст действительно лучше обернуть, как сказали выше, например, в article

Добавлено через 35 минут
сработало через span

HTML5
1
2
3
4
<div id="top">
    ghjgjgjgjgj
<div id="content"><span style="padding-left: 150px">Left</span></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#top {
    position:relative;
    width:1000px;
    display:block;
}
 
#content{
    position:relative;
    background-color:#f4f4f4;
    background-image:url(image/content_bg.png);
    background-repeat:repeat-y;
    margin-left:0 auto;
    width:200px !important;
    padding:20px 20px 20px 20px;
    display:block;
}
 
span {
    position:relative;
    display:block;
    color:red;
}

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

Добавлено через 17 минут
через box-sizing лучше
http://jsfiddle.net/pkpqn/3/
про свойство можно прочитать тут

HTML5
1
2
3
4
<div id="top">
    ghjgjgjgjgj
<div id="content">left</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#top {
    position:relative;
   width:200px; /* Ширина */
    display:block;
}
 
#content{
    position:relative;
    background-color:#f4f4f4;
    background-image:url(image/content_bg.png);
    background-repeat:repeat-y;
    margin-left:0 auto;
    width:200px;
    padding:20px 20px 20px 150px;
    display:block;
     -moz-box-sizing: border-box; /* Для Firefox */
    -webkit-box-sizing: border-box; /* Для Safari и Chrome */
    box-sizing: border-box; /* Для IE и Opera */
}

padding не работал потому, что ширина суммируется из паддинга, бордера и маржина

Donald28 · 11.02.2013, 12:04

Во-первых, мне не понятна вот эта строчка:

CSS
1
margin:0px 0px 0 auto;

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

CSS
1
2
3
margin:0px auto;
/* или */
margin:0px auto 10px;

Во-вторых. Как ты называешь "центрирование" через padding (а в действительности внутренние отступы) зависят от того, какой DOCTYPE ты используешь для html-странички. Пусть у тебя следующие стили у блока с контентом:

CSS
1
2
3
4
#content{
    width:730px;
    padding:20px; /* внутренние отступы сверху, снизу, слева и справа равны по 20px*/
}

Если:

HTML5
1
<!DOCTYPE html>

То общая ширина блока #content будет равна 730px+20px+20px.
Если

CSS
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

То общая ширина блока #content равна 730px, а ширина содержимого в этом блоке: 730px-20px-20px.

@Sir1us · 11.02.2013, 17:16 **[ТС]**

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

Во-первых, мне не понятна вот эта строчка:
Код CSS
1
margin:0px 0px 0 auto;

если открыть исходник сайта, там поймешь откудого 0px 0px 0 auto;
темболее я не просто так, их прикрепил.

Мое так званое центрирование через padding

Сообщение от Дерек

паддинг ничего не центрирует.

Sir1us:Делает внутренний отступ от краев, им же можно и центрировать текст.

Для чего повторять, что оно делает?

Во-вторых. Как ты называешь "центрирование" через padding (а в действительности внутренние отступы)

В сообщении я указывал

центрировать мне нужно с помощью атрибуты padding

Отпединговал так устроит?)

Sheila спасибо Вам за помощь!

Новые блоги и статьи Все статьи Все блоги /
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	11.02.2013, 01:15
	паддинг ничего не центрирует. он только делает отступ. не совсем понимаю тебя. естественно, что он будет двигать весь контент, включая текст. ты ведь не отдельно тексту задаёшь паддинг, а всему содержимому content. а вообще, как вариант, отдельно тексту можно задать нужные параметры, типа паддинг, маргин. просто текст обернуть в другой div и ему задать эти параметры. 1

@Дерек 2 / 2 / 0 Регистрация: 08.02.2013 Сообщений: 30
	11.02.2013, 02:23
	паддинг ничего не центрирует!!! ничего нельзя им центрировать. паддинг - это отступ! отступ, он и в африке - отступ, а не центрирование. 0