2014-02-17 2 views
0

div 행 (이미지가있는 행) 안에 이미지를 정렬하려고합니다. 이미지 정렬 (왼쪽 -> 오른쪽)을 위해 나는 오프셋을 사용할 것입니다. 하지만 이제 내 행이 컨테이너 위에 나타납니다. 이제 마진을 맨 줄에 놓으면 바탕 화면에서 작동하지만 모바일/태블릿 반응에 영향을 미칩니다. 누군가가 컨테이너 내부의 행을 정렬하도록 도와 줄 수 있습니까?이미지가있는 행의 중앙 정렬 방법 (위쪽/아래쪽) .. Bootstrap-3

<div class="container"> 
    <div class="row"> 
     <img src="images/blueprint.png" class="img-responsive" id="book-img" /> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
      <img src="images/blueprint_logo1.png" class="img-responsive" /> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
      <img src="images/blueprint_logo2.png" class="img-responsive" /> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
      <img src="images/blueprint_logo3.png" class="img-responsive" /> 
     </div> 
    </div> 
</div> 

CSS :

#book-img { 
    position:absolute; 
    background-position:center; 
} 

http://jsfiddle.net/isherwood/kc3s5/

+0

Fiddl e가 추가되었습니다. 누락 된 닫는'div' 태그도 추가했습니다. – isherwood

+0

약간의 설명이 필요합니다. 네가 성취하려는 것을 확신하지 못한다. – isherwood

+0

또한 'col-sm-4'클래스와 up 클래스는 중복됩니다. 그들은 모두 기본적으로'col-xs-4'를 따른다. – isherwood

답변

0

당신이 찾고있는 모든 컨테이너의 배경 인 경우는,이 ​​작동합니다 :

http://jsfiddle.net/isherwood/kc3s5/4

.container.has-bg { 
    background-image: url(http://placehold.it/200x200/990000); 
    background-size: cover; 
}