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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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