| ksa | 22.03.2017 08:43 |
Цитата:
|
Сообщение от exec
Полчаса сидел с этими флоатами, ну не понимаю я их, хоть убей.
|
Очень толково все рассказано. ;)
Выравнивание элемента
Существуют ли универсальные средства для выравнивания любых элементов по горизонтали и вертикали?
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рх и соответствующее выравнивание текста.
|
Цитата:
|
А вот для чего все старания: datepicker
ИЧСХ, единственная проблема, которая возникла при написании - это выравнивание, чтобы стрелочки были сбоку, а месяц посередине. Полчаса сидел с этими флоатами, ну не понимаю я их, хоть убей. |
Цитата:
<html>
<head>
<style>
.header {
width: 300px;
font: 14px Arial;
}
.header span {
display: inline-block;
text-align: center;
}
.arrow {
width: 20px;
}
.month {
width: 260px;
}
</style>
</head>
<body>
<div class="header"><span class="arrow">«</span><span class="month">March 2017</span><span class="arrow">»</span></div>
</body>
</html>
Ну и это будет полезно знать - http://htmlbook.ru/css/box-sizing |
Цитата:
Очень толково все рассказано. ;) |
| Часовой пояс GMT +3, время: 16:50. |