0

Есть рамка, хочу её сделать фоном по центру, и в ней размещать блоки.

Проблема в том, что как только не пробовал, если выстроить относительно неё элементы, то при изменении масштаба страницы, элементы перемещаются за пределы рамки. Если позиционировать их через CSS свойства position, то начинаются проблемы с выравниванием по центру.

Вот рамка (залил её цветом, размеры как у текущей), которую я использую как картинку фона со свойствами

background-position: center;
background-repeat: no-repeat;">

рамка

А вот элемент, который я хочу разместить в ней, с отступом от верхнего края рамки, и отцентрованным по ширине рамки.

элемент

Как его можно разместить внутри рамки, чтобы при прокрутке / изменении масштаба он был привязан к рамке?

<html>
<head>
<style type="text/css">
.parent {
 background-image: url(bg.png);
 background-position: center;
 background-repeat: no-repeat;
 width: 100%;
 height: 100%;
 margin: 0 auto;
 position: relative;
}

.child{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 25%;
 left: 10%;
}
</style>
</head>
<body bgcolor="#000000">
<div class="parent">
<div class="child"><img src="logo.png"></div>
</div>
</body>
</html>
4
  • Проще сделать рамку, а не использовать фон-рамку.
    – SVE
    8 сен 2016 в 15:19
  • @ElenaSemenchenko что Вы имеете в виду? Рамка, это картинка, для примера я просто её залил цветом, какая разница, как она выглядит? 8 сен 2016 в 15:34
  • я имею ввиду что border и background это разные свойства.
    – SVE
    8 сен 2016 в 15:43
  • У меня про border вообще речи нет ;) Есть только background. 8 сен 2016 в 15:53

2 ответа 2

1

Вот по идее так. По горизонтали и по вертикали выравнивается. Можно дать min-width, и прыгать уже потом от разрешения еще. А так меняйте у .parent ширину, высоту и всегда будет по центру зеленый

.parent{
		width: 50%;
		height: 300px;
		margin: 0 auto;
		border:10px solid blue;
		position: relative;
	}

	.child{
		width: 80%;
		height: 50%;
		background: lime;
		position: absolute;
		top: 25%;
		left: 10%;
	}
<div class="parent">
	<div class="child">
		
	</div>
</div>

А вот еще 2ой вариант, с использованием flex-box;

У flex-блока его детей - margin:auto; - выравнивает как по горизонтали так и по вертикали

.parent{
   display: flex;
width: 50%;
height: 500px;
border:10px solid blue;
}
.child{
width: 20%;
height: 30%;
background: lime;
margin: auto;
}
<div class="parent">
   <div class="child">
		
   </div>
</div>

2
  • Я наверно не правильно объяснил, смотрите: <html> <head> <style type="text/css"> .parent { background-image: url(bg.png); background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; margin: 0 auto; position: relative; } .child{ width: 100%; height: 100%; position: absolute; top: 25%; left: 10%; } </style> </head> <body bgcolor="#000000"> <div class="parent"> <div class="child"><img src="logo.png"></div> </div> </body> </html> Примерно такой у меня каркас. 8 сен 2016 в 15:00
  • @Alexan-Dwer Перенесите это в вопрос 8 сен 2016 в 15:05
0

Решил так:

<html>
<head>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

.parent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}

.block {
width: 886px;
height: 636px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-image: url(bg.png);
background-repeat: no-repeat;
}

.child{
width: 100%;
height: 61px;
text-align: center;
padding-top: 50px;

}
</style>
</head>
<body bgcolor="#000000">
<div class="parent">
<div class="block">
<div class="child"><img src="logo.png"></div>
</div>
</div>
</div>
</body>
</html>

Пока, вроде всё работает, как хотел...

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.