Blueprint CSS 프레임 워크를 사용하여 컨테이너의 하단/오른쪽/중앙/중간에 텍스트/이미지를 어떻게 정렬합니까?
-
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