Задать вопрос
@hohopro35
html

Как выровнять объекты?

html
<!DOCTYPE html>
<html>
<head>
	<title>Главная</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="container">
			<div class="head"></div>

			<div class="content">
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
				<div class="content_block"></div>
			</div>

			<div class="footer"></div>
	</div>
</body>
</html>

css

header{
}
.head{
	border:solid 1px;
	padding: 60px;
	background-color: #FFA775;
}
main{
	margin: 0 auto;
}
.content{
	margin: 0 auto;
}

.content_block{
	position: relative;
	max-width: 1200px;
	width: 295px;
	height: 200px;
	border: solid 1px;
	display: inline-block;
	padding-bottom: 50px;
	margin: 0 auto;
	margin-top: 40px;
	background-color: #FFE475;
}

.container{
	max-width: 1200px;
	margin: 0 auto;
}

.footer{
	border: solid 1px;
	padding: 100px;
	margin-top: 50px;
	background-color: #BDFF00;
}

@media only screen and (max-width: 1216px) {

	.content{
	position: relative;
		margin: 0 auto;
	}



	.content_block {
		position: relative;
		max-width: 1200px;
		width: 295px;
		height: 200px;
		border: solid 1px;
		display: inline-block;
		padding-bottom: 50px;
		margin: 0 auto;
		margin-top: 40px;
		
		background-color: #FFE475;
	}

	.head{
	width: 900px;
	border:solid 1px;
	padding: 60px;
	background-color: #FFA775;
	margin: 0 auto;
	}

	.content{
	margin: 0 auto;
}


	.container{
	max-width: 1200px;
	margin: 0 auto;
}
}

Когда экран меньше 1216 пикселей, размеры меняются, но блоки остаются с краю. Есть возможность их выровнять по середине?
  • Вопрос задан
  • 63 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Spaceoddity
Ну флексбоксы и гриды вам и без меня посоветуют. Я лишь отмечу - приучайтесь читать код, а не бездумно копипастить его. У вас, в таком коротком коде, у селектора .content почему-то дублируются правила. Не говоря уже о дублировании правил и свойств в блоке медиазапросов. Пользуйтесь одним из фундаментов CSS - каскадом. Если вы прописали свойства какому-то селектору, а потом в блоке медиазапросов что-то дописали или изменили , то все описанные ранее свойства для этого селектора так же будут применены (если они не переопределены с большей специфичностью - определение блока медиазапросов по дефолту повышает специфичность всех вложенных селекторов).

Конкретно на ваш вопрос, ответ:
media only screen and (max-width: 1216px) {

.content{
text-align: center;

position: relative;
margin: 0 auto;
}

.content_block {
text-align: left;

position: relative;
max-width: 1200px;
width: 295px;
height: 200px;
border: solid 1px;
display: inline-block;
padding-bottom: 50px;
margin: 0 auto;
margin-top: 40px;

background-color: #FFE475;
}
//...
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Изображения на главную страницу в стиле Jetton и 1вин
25 нояб. 2024, в 00:22
12000 руб./за проект
Дизайн презентации
24 нояб. 2024, в 23:46
20000 руб./за проект
Разработать Telegram-бота для анализа звонков продаж
24 нояб. 2024, в 23:15
10000 руб./за проект
Ещё заказы