Twitter Bootstrap 3, 세로 중앙 콘텐츠

Twitter Bootstrap 3, 세로 중앙 콘텐츠

---

이 질문에 이미 답변이 있습니다.

• Bootstrap 3과 수직 정렬 23 답변

나는 이것이 수천 번 요청되었다는 것을 알고 있지만 텍스트와 이미지를 세로로 중앙에 배치하는 방법을 찾을 수 없습니다.

동적 콘텐츠가 포함 된 Twitter Bootstrap 3을 사용하고 있으므로 텍스트 나 이미지의 크기를 알 수 없습니다. 또한 모든 것이 반응하기를 바랍니다.

달성하려는 레이아웃의 종류를 요약 하는 bootply 를 만들었습니다 . 기본적으로 텍스트와 이미지를 세로 중앙에 배치하고 싶습니다. 텍스트가 항상 이미지보다 큰 것은 아닙니다.

누군가 제발 이것으로 나를 도울 수 있습니까?

감사합니다.

---

당신이 사용할 수있는 display:inline-block대신 float과 vertical-align:middle이 CSS로 :

.col-lg-4, .col-lg-8 {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

데모 http://bootply.com/94402

---

옵션 1은를 사용하는 것 display:table-cell입니다. float:none..를 사용하여 Bootstrap col- *를 unfloat해야합니다 .

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

http://bootply.com/94394

---

옵션 2 는 display:flex플렉스 박스로 행을 수직으로 정렬하는 것입니다.

.row.center {
   display: flex;
   align-items: center;
}

http://www.bootply.com/7rAuLpMCwr

---

수직 센터링은 Bootstrap 4 에서 매우 다릅니다 . Bootstrap 4 https://stackoverflow.com/a/41464397/171456에 대한 답변을 참조 하십시오.

참고 URL : https://stackoverflow.com/questions/20005278/twitter-bootstrap-3-vertically-center-content