어떻게 사용할 수 있는 수직 부트스트랩에 맞추십시오.

간단한 문제: How do I 세로일 col 정렬 col 내에서 사용하는 부트스트랩에? 예 여기 (난 로렌아줌마가 세로로 정렬하려면 child1a 및 child1b):

http://bootply.com/73666

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;
}
edsioufi
편집된 질문12일 8월 2013 в 5:32
프로그래밍
css3 twitter-bootstrap-3 twitter-bootstrap
12일 8월 2013 в 4:31
5 파운드
질문에 대한 의견 (1)
해결책
.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

'테이블 레이아웃: 고정식입니다 '방지 기능을 col-* 클래스뿐만 깼다.

Chris Moschini
편집된 답변28일 7월 2014 в 5:22
해설 (4)

아마 이 늙은 사람이 더 도움이 필요한 신앙이니라 항목를 못하며창조된 다음과 같은 예를 들어 (이렇게 하면 중간 선에서 텍스트는 이미지 있으면 더 높이 다음 텍스트).

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;
}

중요한 것은 내가 놓쳤다 심아이엔큐 &quot, float: &quot 없음;; 열 특성 때문에 왼쪽 부동 잡을라는데 충스러웠으니 부트스트랩에.

건배!

prinsen
편집된 답변10일 5월 2017 в 1:24
해설 (2)

부모에 대한: '디스플레이: 마련이다. '

아이를. '디스플레이: 표에서. '

추가하고 '수직 정렬: '중간.

하지만 지금 시간 내말들어봐 내가 집에 있는 바이올린, 아자!

다음은 사랑스러운 확인 해야했다. http://jsfiddle.net/lharby/AJAhR/

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}
moritzg
편집된 답변9일 5월 2017 в 12:11
해설 (1)

내가 너버 추가 했습니다. 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;
}
southz rgw
편집된 답변29일 2월 2016 в 4:08
해설 (2)

http://jsfiddle.net/b9chris/zN39r/

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;
}

중요 사항:

  • 이 '수직 정렬: 중간. 디스플레이: 태그를 주님으로부터그에게 부트스트랩에 발려짐 클래스뿐만 표에서, '적용해야 합니다. it ',' a '행' 등 col-* 될 수 없습니다.
  • 이 can& 수행할 수 없는 무의미한 이 추가, 아마도 해당 HTML 태그를 # 39, t, 외람되나.
  • 배경과 목적을 위해 그곳에 데모, re 그냥 # 39 는 불필요한 - they& 있다. 그래서 당신은 특별한 규칙을 적용할 수 있는 't need to don& # 39,' 행 '또는' col-* 것이다.
  • 알 수 없는 것이 안쪽 태그번호 너비입니다 스트레치한 100% 를 모. 이 일이 아닐 수 있지만, t # 39 의 책정안 didn& 볼 수 있습니다. 만약 그렇다면, 종료할 수 있는 보다 더 가까이 일부 다른 대답을 할 수 있습니다.

http://jsfiddle.net/b9chris/zN39r/1/

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.

해설 (0)

39 에 답이 prinsen& 최선의 선택이다. 그러나 이 문제를 해결하려면 don& 열 필요가 있는 자신의 코드를 축소, t # 39 둘러싸여 미디어 확인란 발표했다. 이러한 스타일은 이렇게 큰 경우에만 적용되는 열은 활성입니다. 다음은 업데이트되도록 완벽한 해답은 아닙니다.

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;
   }
}
해설 (0)
    • 및 1b 1b you mean you want to be (side by side?
 <div class="col-lg-6 col-md-6 col-12 child1">
      <div class="col-6 child1a">Child content 1a</div>
      <div class="col-6 child1b">Child content 1b</div>
 </div>
daniel__
편집된 답변12일 8월 2013 в 5:02
해설 (3)

부트스트랩이 함께 4, 할 수 있어 훨씬 쉽게: [http://v4-alpha.getbootstrap.com/layout/flexbox-grid/ # vertical alignment] [1]

[1]: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/ # vertical alignment

해설 (0)