Twitter Bootstrap 3, 세로 중앙 콘텐츠 [중복]

Question

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

Bootstrap 3과 수직 정렬 (답변 23개)

닫은 5 년전.

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

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

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

누군가 나를 도와줄 수 있나요?

감사합니다.

Answer 1

display:inline-block 대신 float 및이 CSS를 사용하여 vertical-align:middle를 사용할 수 있습니다.

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

.

데모 http:///bootply.com/94402

Answer 2

옵션 1 사용하는 것입니다 display:table-cell.다음을 사용하여 Bootstrap col-*을 언플로팅해야 합니다. float:none..

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

http://bootply.com/94394

---

옵션 2 ~이다 display:flex Flexbox를 사용하여 행을 수직으로 정렬하려면 다음을 수행하십시오.

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

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

---

수직 센터링은 다음과 같이 매우 다릅니다. 부트스트랩 4.Bootstrap 4에 대한 답변을 참조하세요. https://stackoverflow.com/a/41464397/171456