Выравнивание картинки по центру css: Как выровнять фотографию по центру веб-страницы?

• html
• css

2

Вам нужно почитать эту статью, с помощью этого совета можно выстраивать в ряд элементы, которые будут подстраиваться под размеры друг друга и не «подлазить» один под один в случае использования float:left.

Во-первых, лишние закрывающие /див после изображений и в конце, перенос тега бр/, во-вторых, что бы всё было в одну строчку — добавьте к этому быдлокоду в каждый див ещё параметр «display: inline;», и к картинкам тоже.

Засунуть все в таблицу или у родительского элемента прописать style='white-space:nowrap'. Если вы допускаете возможность переноса, то хватит и float:left.

5

Зарегистрируйтесь или войдите

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Адаптивное выравнивание изображений на всю ширину браузера

9464

Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.

1

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
</div>

HTML

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 50%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

CSS

<div>
	<a href="#"><img src="https://snipp. ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>	
</div>

HTML

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 33.3%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

CSS

3

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp. ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-7.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-8.jpg" alt=""></a>	
</div>

HTML

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 25%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

CSS

4

Добавим стили, которые выведут фото по вертикали на мобильных с шириной экрана до 800px.

@media screen and (max-width: 800px) {
	.photos a {
		width: 100%;
		float: none;
	}
}

CSS

08.02.2019, обновлено 27.08.2019

9464

#Background #CSS #HTML #Изображения

Другие публикации

Модальное окно на затемненном фоне

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет…

Адаптивные блоки YouTube

Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать, то он растянется на всю ширину родителя, но для высоты hight=»100%» не работает.

css — Как центрировать текст под изображением

Задавать вопрос

спросил 1 год, 8 месяцев назад

Изменено 1 год, 8 месяцев назад

Просмотрено 419 раз

0

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

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

HTML

 

            
            заголовок
        
 

CSS

 раздел.центр{
    отображение: встроенный блок;
    выравнивание текста: по центру;
    вертикальное выравнивание: сверху;
}
div изображение{
    положение: абсолютное;
    сверху: 0;
    слева: 0;
    справа: 0;
    внизу: 0;
    маржа: авто;
    максимальная ширина: 100%;
    максимальная высота: 100%;
    высота: 320 пикселей;
    ширина: 250 пикселей;
    верхнее поле: 200 пикселей;
}
.описание{
    дисплей: блок;
    
}
 

1

Должен быть в состоянии справиться с этим с некоторыми text-align и некоторыми margin-top .

 дивизионный центр {
  маржа сверху: 25%;
  выравнивание текста: по центру;
}
.
  центр изображения {
    максимальная ширина: 100%;
    максимальная высота: 100%;
    высота: 320 пикселей;
    ширина: 250 пикселей;
} 

 <дел>
  
  
заголовок