Выровнять изображения по центру и левому краю

@Ewgeniy · Регистрация: 30.05.2016

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

Добрый вечер. Проблема такая. Решил внизу веб-страницы сделать изображения. Два слева - их получилось сделать так, как я и хотел. И два по середине - они, вроде как, получились, но сдвинулись вниз. Я код просмотрел, ошибок, вроде нет. За помощь буду очень благодарен.
Вот код:

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
<!DOCTYPE html>
<html>
<head>
<title>Tundra</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
   .fig {
   text-align: center;
   border: 5rem solid #FFF;
   }
   .adi {
   text-align: center
   }
   h1 { font-family: Palatino Linotype, serif;
   color: rgb(121,149,117);
   }
   .hhh {
   text-align: center
   font-family: Palatino Linotype;
   color: rgb(147,124,113);
   font-weight: 200;
   border: 2px solid grey;
   }
   .rrr {
   text-align: center
   }
   .aaa {
   font-family: Palatino Linotype;
   color: rgb(147,124,113)
   }
   .zzz {
   border: 10px solid #FFF
   }
   .mmm {
   text-align: center;
   }
  </style>
</head>
 
<body>
<h1 align="center">So, what is the tundra?</h1>
 
<hr>
<div class="aaa">
<figure class="hhh">
<p>In physical geography, tundra is a type of biome where the tree growth is hindered by low temperatures and short growing seasons.
The term tundra comes through Russian тундра (tundra) from the Kildin Sami word tundar "uplands", "treeless mountain tract".
There are three types of tundra: arctic tundra, alpine tundra, and Antarctic tundra. In tundra, the vegetation is composed of dwarf shrubs, sedges and others.
Scattered trees grow in some tundra regions. The ecotone (or ecological boundary region) between the tundra and the forest is known as the tree line or timberline.</p>
</figure>
<div class="fig"><img src="http://forum.chukotken.ru/uploads/gallery/album_386/gallery_3178_386_76971.jpg" width="1080" height="720"/>
</div>
 
<div class="adi"><img src="http://cameralabs.org/media/cameralabs/images/Dasha/00013_year/009/19/1/2/Caribou-in-autumn-tundra-with-beautiful-snowy-mountains-in-background.jpg" width="1080" height="720"/>
</div>
 
<p>It's so beutiful, isn't?</p>
 
Click <a href="http://review-planet.ru/2012/11/tundra-foto/">here</a> to see more terrific photos of tundra!
<p>Some interesting facts about tundra you might not know:</p>
<ul>
  <li>The word tundra comes from the Finnish word tunturia which means treeless land.</li> 
  <li>The tundra biome covers about 20% of the Earth.</li>
  <li>The largest animal that lives in the tundra biome is the polar bear. They thrive on fatty meats to give them enough energy to live through the harsh winters.</li>
</ul>
If you want to see an interestng video about it, then watch <a href="https://youtu.be/6Na_Vdwlav0">this video</a>.
<p>The tundra is very cold, and does not have a lot of plant diversity. There is a very short season for plants to grow and reproduce.</p> 
 
<p>There is the picture below which shows the map of arctic and antarctic tundra.</p>
<div class="rrr">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Biome_map_11.svg/1119px-Biome_map_11.svg.png" width="1080" height="720"/>
</div>
 
<p>Tundra is the global biome that consists of the treeless regions in the north (Arctic tundra) and high mountains (alpine tundra). The vegetation of tundra is low growing, and consists mainly of sedges, grasses, dwarf shrubs, wildflowers, mosses, and lichens. The word "tundra" is derived from the Finnish word "tunturi," which refers to the upland treeless parts of hills and low mountains free of woodlands.
 
Tundra climates are extremely cold and snowy in winter. Summers are cool. The southern or lower limit of trees corresponds roughly to a mean July temperature between 10 and 12 degrees Celsius (50 and 53.6 degrees Fahrenheit), but in maritime areas the limiting summer temperature can be lower. Low shrubs, less than about 1 meter (3.2 feet) tall, and peaty soils are common near treeline. In the northern extremes and at higher elevations, the landscapes are predominantly barren with scattered wildflowers, such as purple mountain saxifrage and Arctic poppies, mosses, and lichens. Most of the Arctic tundra regions are underlain by permafrost, ground that is permanently frozen beneath a shallow layer of soil that thaws annually.</p>
 
<p>Tundra ecosystems have a variety of animal species that do not exist in other regions, including the Arctic hare, musk oxen, lemmings, Arctic ground squirrels, and ptarmigan. Other animals migrate annually to the Arctic including caribou and many species of birds.</p>
 
<p>The Arctic tundra is the least exploited of Earth's biomes. It is a unique biological laboratory for scientists to study unaltered ecosystems. The chief ecological concerns in the Arctic tundra are cumulative impacts of oil and mineral exploitation, roads, tourism, and long-range transport of air pollution from industrial centers to the south. Global warming is likely to have its greatest effect on tundra. Major concerns are the fate of permafrost and the carbon contained in Arctic peat. Decomposition of this carbon could increase the concentration of carbon dioxide in the atmosphere.</p>
<hr>
 
<div class="zzz">
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss1.jpg"/>
</div>
 
<div class="zzz">
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss2.jpg"/>
</div>
 
<div class="mmm">
 
<div class="zzz">
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss3.jpg"/>
</div>
 
<div class="zzz">
<img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss4.jpg"/>
</div>
</div>
</body>
</html>

Вот, что получилось...

Выровнять изображения по центру и левому краю

@mrtoxas · 30.05.2016, 23:37

Во-первых, в коде ошибка все же есть.

CSS
1
2
.hhh {
   text-align: center

Не закрыт стиль точкой с запятой.
А во-вторых, что-то отличается то, что на картинке должно быть и приведенный код.

@Fedor92 · 30.05.2016, 23:55

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

А во-вторых, что-то отличается то, что на картинке должно быть и приведенный код.

Это то что получилось...

У него изображения в дивах лежат и занимают 100% ширины страницы, а должны быть на одном уровне...

@mrtoxas · 31.05.2016, 00:59

Дивное расположение. Или я что-то не так понял

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrapper{
  position:relative;
  height:450px;
}
 
.img-left img, .img-center img{
  display:block;
  width:320px;
  margin:10px;
}
 
.img-center{
  position:absolute;
  top:0; left:50%;
  margin-left:-170px;
}
 
.img-left{
  position:absolute;
  top:0; left:0;
}

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="wrapper">
  <div class="img-left">
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss1.jpg"/>
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss2.jpg"/>
  </div>
  <div class="img-center">
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss3.jpg"/>
    <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/moss4.jpg"/>
  </div>
</div>

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

Выровнять изображения по центру и левому краю

Решение