Не выравнивается картинка по центру

@iskan13 · Регистрация: 11.08.2012

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

И снова здравствуйте, товарищи!

Вновь требуется помощь нубу. Подскажите, почему картинка упрямо е хочет вставать по центру? Исходные данные следующие: есть body, в нем есть div с классом "content", в нем и надо запихать картинку, центрировав по ширине от родительского дива. форматирование следующее:

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
body {
    font-family:Calibri;
    min-width: 800px;
    overflow-y: scroll;
    }
 
.content {
    border: solid 1px #515151;
    padding: 1% 1% 1% 3%;
    margin-top:20px;
    margin-right:5%;
    margin-left: 23%;
    border-radius:10px;
}
 
.content_img {
    position:relative;
    text-align:center;
    max-width:85%;
}
 
.content_img_text {
    color:#757575;
    font-style:italic;
    font-size:12px;
    text-align:center;
}

Под картинкой, при этом, есть подпись с классом "content_img_text", она превосходно выравнивается по центру дива. В чем проблема? Всю свою пустую голову уже сломал, помогите разобраться...

@сахей · 10.03.2013, 23:47

в чем проблема??
возьми картинку в блок или в абзац и попробуй центрировать

HTML5
1
 <p style="text-align:center;">

по идее должно работать

@Serezha · 10.03.2013, 23:52

HTML5
1
2
3
<div class="imgCenter">
    <img src="фото.gif" border="0" width="5" height="5" alt="" />
  </div>

CSS :

HTML5
1
2
3
.imgCenter {                  //точку обязательно
text-align:center;
}

@ft4l · 10.03.2013, 23:56

text-align только для текста
, что-то вроде этого

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
    font-family:Calibri;
    min-width: 800px;
    overflow-y: scroll;
    }
 
.content {
    border: solid 1px #515151;
    padding: 1% 1% 1% 3%;
    margin-top:20px;
    margin-right:5%;
    margin-left: 23%;
    border-radius:10px;
}
.content_img {
    display: block;
    max-width:85%;
    margin: 1ex auto;
}</style>
</head>
<body>
<div class="content">
<img class="content_img" src="file://G:/PICTURES/1166112302.gif"/>
</div>
</body>
</html>

@iskan13 · 11.03.2013, 00:08 **[ТС]**

Сообщение от сахей

в чем проблема??

Вам не кажется, что если бы я знал, в чем проблема - я бы не спрашивал? =)

Меня интересует, почему картинка без костылей не центрируется. Или я туплю, и она и не должна центрироваться text-align'ом? Объясните, прошу!

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

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

text-align только для текста

я начал как раз это подозревать... спасибо

Добавлено через 9 минут
Прошу прощенья, господа, но костыли не хотят работать. Ни в <div>'е, ни в <p> картинка просто не отображается. Сработал вариант уважаемого ft4l, за что ему еще раз спасибо. Не смогли бы вы объяснить, как оно работает, и что есть "ex"?

Мне очень неудобно за дилетантство =)

@ft4l · 11.03.2013, 00:14

за счёт margin: 1ex auto; и за счёт того что у родительских элементов вычислилось width
всмысле margin-left == margin-right == auto

//1ex ~~ ширина одного символа 'x'

@iskan13 · 11.03.2013, 00:18 **[ТС]**

ft4l, прекрасно, спасибо! Я пытался сделать через margin-left:auto, но у меня не получилось, теперь понятно почему)

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@ft4l Невнимательный 3112 / 1291 / 359 Регистрация: 08.02.2013 Сообщений: 7,566 Записей в блоге: 2
	11.03.2013, 00:14
	за счёт margin: 1ex auto; и за счёт того что у родительских элементов вычислилось width всмысле margin-left == margin-right == auto //1ex ~~ ширина одного символа 'x' 1

@iskan13 15 / 4 / 0 Регистрация: 11.08.2012 Сообщений: 157
	11.03.2013, 00:18 [ТС]
	ft4l, прекрасно, спасибо! Я пытался сделать через margin-left:auto, но у меня не получилось, теперь понятно почему) 0