Показать сообщение отдельно
  #2 (permalink)  
Старый 16.03.2017, 05:13
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Сам я уже так намучался с этим выравниванием, что тупо делаю через js.

<p>
	Align( document.getElementById("aligned"), <span id="update">1</span> );
</p>
<div style="width: 500px; height: 350px; border: 3px solid black;">
	<div id="aligned" style="width: 100px; height: 100px; background-color: #cccccc;">
	</div>
</div>
<script type="text/javascript">

function Align(target, index, parent) {
	parent = parent || target.parentNode;
	var rect = parent.getBoundingClientRect();
	var offset = parseInt(getComputedStyle(parent).borderWidth);
	target.style.position = "absolute";
	target.style.top = [
		(offset + rect.top),
		(offset + rect.top + (parent.clientHeight - target.clientHeight) / 2),
		(rect.bottom - target.clientHeight - offset)
	][Math.floor((index - 1) / 3)] + "px";

	target.style.left = [
		(offset + rect.left),
		(rect.left + (parent.clientWidth - target.clientWidth) / 2),
		(rect.right - target.clientWidth - offset)
	][(index - 1) % 3] + "px";

	target.style.marginTop = 0;
	target.style.marginLeft = 0;
}

var update = document.getElementById("update");
var i = 1;
setInterval(function () {
	update.innerHTML = i;
	Align( document.getElementById("aligned"), i );
	i++;
	if (i == 10) i = 1;
}, 1000);

</script>
Ответить с цитированием