간단한 문제: How do I 세로일 col 정렬 col 내에서 사용하는 부트스트랩에? 예 여기 (난 로렌아줌마가 세로로 정렬하려면 child1a 및 child1b):
HTML
<div class="col-lg-12">
<div class="col-lg-6 col-md-6 col-12 child1">
<div class="col-12 child1a">Child content 1a</div>
<div class="col-12 child1b">Child content 1b</div>
</div>
<div class="col-lg-6 col-md-6 col-12 child2">
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
</div>
</div>
일부 CSS.
.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;
}
.child1a, .child1b{
border:4px solid black;
display:inline-block !important;
}
.child1{
border:4px solid blue;
height:300px;
display:table-cell !important;
vertical-align:middle;
}
.child2{
border:4px solid red;
}
.parent {
display: table;
table-layout: fixed;
}
.child {
display:table-cell;
vertical-align:middle;
text-align:center;
}
'테이블 레이아웃: 고정식입니다 '방지 기능을 col-* 클래스뿐만 깼다.
아마 이 늙은 사람이 더 도움이 필요한 신앙이니라 항목를 못하며창조된 다음과 같은 예를 들어 (이렇게 하면 중간 선에서 텍스트는 이미지 있으면 더 높이 다음 텍스트).
HTML:
<div class="row display-table">
<div class="col-xs-12 col-sm-4 display-cell">
img
</div>
<div class="col-xs-12 col-sm-8 display-cell">
text
</div>
</div>
CSS.
.display-table{
display: table;
table-layout: fixed;
}
.display-cell{
display: table-cell;
vertical-align: middle;
float: none;
}
중요한 것은 내가 놓쳤다 심아이엔큐 ", float: " 없음;; 열 특성 때문에 왼쪽 부동 잡을라는데 충스러웠으니 부트스트랩에.
건배!
내가 너버 추가 했습니다. 100%, ie 와 FF 에서 사용할 때는 내가 이상한 바이비어 수리입니다 표시하십시오 표를 일부 이 예. IE 와 FF 는 약간의 문제가 있는 오른쪽 너버 디스플레이하여 col-md-* 주기표시
.display-table {
display: table;
table-layout: fixed;
width: 100%;
}
.display-cell {
display: table-cell;
vertical-align: middle;
float: none;
}
HTML:
<div class="item row">
<div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
<div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>
CSS.
div.item div h4 {
height: 60px;
vertical-align: middle;
display: table-cell;
}
중요 사항:
CSS.
div.item div {
background: #fdd;
table-layout: fixed;
display: table;
}
div.item div h4 {
height: 60px;
vertical-align: middle;
display: table-cell;
background: #eee;
}
디이브이 테이블 레이아웃 속성을 '에서' col- 및 디스플레이 추가된 것이다. 이 태그 (s) '가' col- 발려짐 적용해야 합니다. # 39 의 다른 주기표시 won&, t help it.
HTML:
<div class="row display-table">
<div class="col-xs-12 col-sm-4 display-cell">
img
</div>
<div class="col-xs-12 col-sm-8 display-cell">
text
</div>
</div>
CSS.
@media (min-width: 768px){
.display-table{
display: table;
table-layout: fixed;
}
.display-cell{
display: table-cell;
vertical-align: middle;
float: none;
}
}
부트스트랩이 함께 4, 할 수 있어 훨씬 쉽게: [http://v4-alpha.getbootstrap.com/layout/flexbox-grid/ # vertical alignment] [1]
[1]: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/ # vertical alignment