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

@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>

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

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

Решение