부트 스트랩 3 명 div의 위치

나는 내가 이미지에서 볼 수 있듯이 구축 할 필요가 레이아웃이 있습니다부트 스트랩 3 명 div의 위치

Layout overview

그레이 헤더의 약자를, 그리고 아무런 문제가 없습니다. 몸에 관해서는 다음과 같이 나는 3 명 div의로 분할했습니다

이

<div class="row"> 
    <div class="col-lg-3"> 
    <p>text positioned right here</p> 
    </div> 
    <div class="col-lg-6"> 
    <a href="#"><img src="path/to/image.jpg"></a> 
    </div> 
    <div class="col-lg-3"> 
    <p>text positioned right here</p> 
    </div> 
</div>

내가 가진 문제는 내가 수직으로 중심되는 텍스트가 필요하고, 내가 어떻게 알 수 없습니다. 나는이 솔루션을 시도했다 Twitter Bootstrap 3, vertically center content하지만 그것은 나를 위해 (어쩌면 내가 뭔가 잘못하고 있어요) 작동하지 않는 것. 그것을 고치기 위해 padding-top을 추가하려고 시도했지만 예상대로 모바일 디스플레이를 망칠 수 있습니다.

누구든지 도와 줄 수 있습니까?

감사합니다.

출처

2014-06-18 Andrei P

여기 좀보세요 http://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically. – Christos

http://stackoverflow.com/questions/10009514/how-to-center-the-contents-of-a-div/10010055#10010055 – ShibinRagh

텍스트 정렬 속성은 가로 텍스트 정렬에만 사용됩니다. 텍스트를 세로로 정렬하려면 position 속성을 사용해야하며, 텍스트 정렬을 사용하여 텍스트를 정렬 할 수 있습니다. 예 : 화면 속성의 가운데 사용.

position:relative; 
left:50%; top:50%;

또한 컨테이너의 - 여백 속성.

출처

2014-06-18 09:52:56 user3722353

가장 가운데에 세로로 정렬하는 가장 간단한 방법은 포함 요소에 display:table을 추가하고 가운데 맞춤을 원하는 요소에 display:table-cell을 추가하는 것입니다. 부트 스트랩에는 수평 센터링을 처리하기위한 .text-center 클래스가 있습니다. 템플릿으로 예제를 사용

http://www.bootply.com/lTigluKakK

<div class="col-xs-3 text-center v-align-container"> 
    <p class="v-align-content">text positioned right here</p> 
    </div> 
    <div class="col-xs-6 text-center"> 
    <a href="#"><img src="//placehold.it/400x400"></a> 
    </div> 
    <div class="col-xs-3 text-center v-align-container"> 
    <p class="v-align-content">text positioned right here</p> 
    </div>

CSS : 당신이 사이드 바 div의 높이를 정의 할 수 있다면

.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */ 
.v-align-content{display:table-cell;vertical-align:middle}

이 잘 작동합니다. 그러나 가운데 요소의 높이 인 을 동적으로과 일치 시키려면 동점을 매기는 데 약간의 부트 스트랩 마법이 필요하지만이 방법은 여전히 해당 사이드 바 내의 내용을 중앙에 배치하는 데 적용됩니다.

출처

2014-06-18 16:00:32

부트 스트랩 3 명 div의 위치

답변

관련 문제