выравнивание картинки по центру блока процентами "на глаз" можно ли так делать ?:)

@lok · Регистрация: 25.09.2010

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

Здравствуйте уважаемые формучане!
Подскажите, пожалуйста, можно ли выравнивать картинки по центру блока таким способом:

HTML5
1
2
3
<div class="images">
<img src="pic/1.jpg" img style ="position:relative; left:3%; top:4%;"  /> 
</div>

Проценты left и top я подбирала «на глаз» для каждой картинки. Картинки разные по ширине и высоте, а дивы под ними – фикисированные. Везде все отображается нормально, но меня смущает, это как-то не серьезно что ли

Или пойдет?

CSS
1
2
3
4
5
6
7
8
.images{
float:left;
width:170px;
height:170px;
background-color:#EAEAEA;
margin:40px 35px 13px;
 
}

Спасибо!

@Alligieri · 10.10.2010, 20:20

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

Проценты left и top я подбирала «на глаз» для каждой картинки. Картинки разные по ширине и высоте, а дивы под ними – фикисированные. Везде все отображается нормально, но меня смущает, это как-то не серьезно что ли

на 99,9 % уверен что на другом разрешении монитора сьедет

@lok · 10.10.2010, 20:47 **[ТС]**

Проверила. 1280X1024 1280X960 и 800x400 держит норм.
не может быть все так просто

А в дримвивере ( во вкладке "проект") все выглядит ужасно, это тоже настораживает

@Hagrael · 11.10.2010, 15:47

Alligieri, ну если ширина и высота блока фикс., то всё будет ОК. Но почему вы решили сделать так? Ведь можно поставить text-align: center; , но вертикально выравнять без таблиц не выйдет. Вот:

CSS
1
2
3
4
5
6
7
8
9
#images {...}
#images_table {
    width: 100%;
    height: 100%;
}
#images_table td {
    text-align: center;
    vertical-align: center;
}

HTML5
1
2
3
4
5
<div id="images">
<table cellpadding="0" cellspacing="0" id="images_table"><tr><td>
<img src="https://www.cyberforum.ru/html/...">
</td></tr></table>
</div>

Выравняется по центру.

@lok · 11.10.2010, 19:16 **[ТС]**

ОК. Спасибо. Значит все так просто)
Я решила сделать так, чтобы таблицу не использовать. Там тогда получается ячейка, в ней блок, а ней -картинка -оч много всего.

@Hagrael · 12.10.2010, 14:22

lok, без таблицы не выйдет. Только у ячеек таблицы есть свойство vertical-align, конечно. вы можете поставить display: table-cell, но это значение не поддерживается IE6 и IE7.

@lok · 12.10.2010, 19:17 **[ТС]**

Hagrael, но уже вышло!

Наверно, я неправильно описала ситуацию.
А может это из-за того, что все блоки помещены в 1 див:

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
<div id="conteiner" class="box">
    
<div class="images">
   <img src="https://www.cyberforum.ru/html/..." img style ="position:relative; left:3%; top:4%;" />
</div>
 
<div class="images">
  <img src="https://www.cyberforum.ru/html/..." img style =" position:relative; left:9%; top:4%;"/>
</div>
 
 <div class="images"> 
<img src="https://www.cyberforum.ru/html/..." img style =" position:relative; left:3%; top:17%;"/>
</div>
 
  <div class="images">
   <img src="pic/5.jpg" img style =" position:relative; left:3%; top:18%;" /> 
   </div>
 
 <!--далее подписи к картинкам--->
 
 <p class = "pp"> Подпись 1</p>
  <p class = "pp"> Подпись 2 </p>
  <p class = "pp"> Подпись 3</p>
  <p class = "pp"> Подпись 4</p>
  
</div> <!--conteiner>

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
#conteiner {
    display:block;
    float:left;
    height:260px;
}
 
.images{
     float:left;
     width:170px;
     height:170px;
     background-color:#E7E7E7;
     margin:40px 35px 13px;
}
 
 
.pp {
    display:block;
    width:170px;
    float:left; margin: 0 35px;
    vertical-align:top;
    font-size:85%; 
    text-align:center;
 
.box 
{
min-height:1px;
}
 
.box:after 
{
display:block; 
visibility:hidden;
 clear:both;
 line-height:0;
 font-size:0; 
margin-bottom:10px;
 content:".";
}
 
}

@Hagrael · 12.10.2010, 19:25

lok, то, что вы написали vertical-align: top ничего не дало, т. к. это блок, а не табличная ячейка, так что смело можете убрать эту надпись. А если захотите применить его (поставить значение middle к примеру для вертикального выравнивания), то без таблиц никак.

@lok · 12.10.2010, 19:43 **[ТС]**

Спасибо! Уберу).

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	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 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@lok 0 / 0 / 0 Регистрация: 25.09.2010 Сообщений: 10
	10.10.2010, 20:47 [ТС]
	Проверила. 1280X1024 1280X960 и 800x400 держит норм. не может быть все так просто А в дримвивере ( во вкладке "проект") все выглядит ужасно, это тоже настораживает 0

@lok 0 / 0 / 0 Регистрация: 25.09.2010 Сообщений: 10
	11.10.2010, 19:16 [ТС]
	ОК. Спасибо. Значит все так просто) Я решила сделать так, чтобы таблицу не использовать. Там тогда получается ячейка, в ней блок, а ней -картинка -оч много всего. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	12.10.2010, 14:22
	lok, без таблицы не выйдет. Только у ячеек таблицы есть свойство vertical-align, конечно. вы можете поставить display: table-cell, но это значение не поддерживается IE6 и IE7. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	12.10.2010, 19:25
	lok, то, что вы написали vertical-align: top ничего не дало, т. к. это блок, а не табличная ячейка, так что смело можете убрать эту надпись. А если захотите применить его (поставить значение middle к примеру для вертикального выравнивания), то без таблиц никак. 0

@lok 0 / 0 / 0 Регистрация: 25.09.2010 Сообщений: 10
	12.10.2010, 19:43 [ТС]
	Спасибо! Уберу). 0