트위터 부트 스트랩 섬네일을 세로로 정렬 하시겠습니까?

업데이트 : 입증 여기에 해당 Plnkr :. http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview (당신이 반응 물건에 걷어차하지 않도록 "미리보기"창을 확대 할 필요가 있지만트위터 부트 스트랩 섬네일을 세로로 정렬 하시겠습니까?

을 그래서 트위터 부트 스트랩의 thumbnails를 사용하려고하고있어 thumbnail 클래스를 사용하여 이미지 갤러리 유형 효과를 만들었지 만 모든 이미지가 제대로 정렬되도록하는 데 문제가 있습니다.

서버에서 검색되는 모든 축소판 이미지는 200px X (200px X 100px), 반대로 (100px X 200px)보다 넓은 경우가 있습니다. 모든 이미지를 정점에 배치하는 것이 좋습니다. 동맹국과 동맹국의 행 중앙에 수평으로 배치됩니다. 이 예를 들면 그래서 :

enter image description here

나는 태그가 모두 줄 수 있도록 testImage, testImage2 및 testImage3 그들의 용기에 아래로 이동하고 싶습니다. 다음 CSS를 함께 할 수있는

<div class="container" ng-controller="StaticDataManagementCtrl"> 
    <div class="row"> 
    <div class="span12"> 
     <tabset> 
     <tab heading="Text" select="loadTextLibrary()"> 
      <div class="row"></div> 
     </tab> 
     <tab heading="Images" select="loadImageLibrary()"> 
      <div class="row-fluid"> 
      <ul class="thumbnails"> 
       <li class="span3" ng-repeat="image in staticImages"> 
       <div class="thumbnail"> 
        <img ng-src="/api/static/images/{{image._id}}/thumb"> 
        <h3>{{image.name}}</h3> 
        <p>Some sample description</p> 
       </div> 
       </li> 
      </ul> 
      </div> 
     </tab> 
     <tab heading="Health Mark" select="loadHealthMarkLibrary()"></tab> 
     </tabset> 
    </div> 
    </div> 
</div>

출처

2013-07-08 Siyfion

가능한 중복 :! http://stackoverflow.com/questions/7273338/how-to-properly-align-an-image-vertically – Girish

시도 :

.thumbnail{ 
    vertical-align: middle !important; 
}

출처

2013-07-08 14:38:20

이 (가)'여기에 필요한 important'인가? – Cattsan

아니요.하지만 중요하다면 중요한 CSS는 다른 CSS를 덮어 쓰고이 CSS를 중요하게 만드십시오. –

나는 이미 이것을 사용해 보았습니다. 쉽게 편집/테스트 할 수 있도록 Plunkr을 시연 해 보도록하겠습니다. – Siyfion

This answer 도움이 될

여기에 (일부 AngularJS와 바인딩 포함) HTML입니다. 기본적으로 height의 텍스트와 이미지를 고쳐야합니다. 부트 스트랩은 크기 조정에 도움이되는 .img-responsive이며, overflow:hidden을 잊지 마십시오.

출처

2013-12-16 15:24:43 RobinGower

트위터 부트 스트랩 섬네일을 세로로 정렬 하시겠습니까?

답변

관련 문제