Выравнивание элемента
Существуют ли универсальные средства для выравнивания любых элементов по горизонтали и вертикали?
float не умеет выравнивать по центру, text-align умеет, но он только для текста. С выравниванием по вертикали тоже всё плохо. По низу можно выравнять через position: absolute; bottom: 0, а по центру никак. Неужели нет никаких нативных способов выравнять элемент? |
Сам я уже так намучался с этим выравниванием, что тупо делаю через 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>
|
exec,
можно обьяснить что не так с выравниванием? и зачем нужен js? |
exec,
<style type="text/css">
div {position: relative;box-sizing: border-box;}
div div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<div style="width: 500px; height: 350px; border: 3px solid black;">
<div id="aligned" style="width: 100px; height: 100px; background-color: #cccccc;">
</div>
</div>
|
|
Цитата:
Это таблица. Простая табличка из одной строки и одной колонки сможет выровнять любой элемент по центру. Как по вертикали... Так и по горизонтали. Теперь есть "табличные" свойства в ЦСС, которые могут это эмулировать для любого элемента http://htmlbook.ru/css/display Есть еще возможности HTML5... http://html5.by/blog/flexbox/ |
Ещё один вопрос назрел. Как сделать так, чтобы месяц выравнивался посередине?
Здесь всё выравнивается, но правую стрелку переносит на следующую строку: <div style="background: #ccc; width: 300px; padding: 5px"> <div style="float: left">◄</div> <div style="text-align: center">March 2017</div> <div style="float: right">►</div> </div> Если месяцу добавить float:left, то всё идёт в одну строчку, но выравнивание пропадает: <div style="background: #ccc; width: 300px; padding: 5px"> <div style="float: left">◄</div> <div style="text-align: center; float:left">March 2017</div> <div style="float: right">►</div> </div> CSS как будто издевается надо мной! Делает что угодно кроме того, что мне нужно! |
Цитата:
<div style="background: #ccc; width: 300px; padding: 5px"> <div style="float: right">►</div> <div style="float: left">◄</div> <div style="text-align: center">March 2017</div> </div> |
<div style="background: #ccc; width: 300px; text-align: center; padding: 5px"> <div style="float: left">◄</div> March 2017 <div style="float: right; ">►</div> </div> |
Если у родителя фиксированный размер, который известен, то зачем вообще использовать float? Каждому дочернему элементу по 100рх и соответствующее выравнивание текста.
|
| Часовой пояс GMT +3, время: 09:46. |