Как выровнять текст/изображения внизу/справа/по центру/середине контейнера, используя структуру CSS Blueprint?
-
05-07-2019 - |
Вопрос
Есть ли какой-нибудь простой способ выровнять содержимое в контейнерах div справа или снизу:
<div class="span-24 align-right last">Text appears on the right side of the layout</div>
или:
<div class="span-2" id="lots-of-content"></div><div class="span-22 last bottom">Appears at bottom of container</div>
или:
<div class="span-24 vertical-middle last">Middle of the container</div>
Вот пример того, над чем я работаю, пытаясь расположить «topnav» ниже:
<div class="container">
<div class="span-16">
<h1>Header</h1>
</div>
<div class="span-8 last vertical-middle">
<div id="topnav" class="align-right"><input type="button" id="register" class="ui-button ui-state-default ui-corner-all" value="Register" /> or <button type="button" id="signin" class="ui-button ui-state-default ui-corner-all">Sign in</button></div>
</div>
<hr />
...
</div>
Решение
Использовать position: absolute
.Например:
.align-right {
position: absolute;
right: 0;
}
/* Or, alternatively, */
.align-right {
float: right;
}
.bottom {
position: absolute;
bottom: 0;
}
.vertical-middle {
position: absolute;
top: 50%;
}
Обратите внимание, что для vertical-middle
, это будет центрировать Верхний край содержания, а не самого содержания.
Убедитесь, что содержащий DIV
является position: relative
чтобы заставить его стать смещенным родителем (относительно которого находится положение дочерних элементов) РЕДАКТИРОВАТЬ:Другими словами, добавьте следующее правило:
.container {
position: relative;
}
Не связан с StackOverflow