이미지를 세로 및 가로로 정렬 HTML

Question

가로 및 세로로 정렬 된 회전 목마 안에 이미지를 배치하고 싶습니다. HAML을 모르는 사람들을 위해

#c-slide.carousel.slide.auto.panel-body{style: "height: 360px;"} 
    .carousel-inner 
     - if pictures.length>0 
      .item.active{style: "text-align:center"} 
       %a.vehicle-image{"data-toggle"=>"modal", "data-target"=>"#myModal"} 
        %img{"src"=>pictures.first.url, style: "max-height: 300px; display: block; margin-left: auto; margin-right: auto;"} 
       - pictures.drop(1).each do |p| 
        .item{style: "text-align:center"} 
         %a.vehicle-image{"data-toggle"=>"modal", "data-et"=>"#myModal"}  
          %img{"src"=>p.url, style: "max-height: 300px; display: block; margin-left: auto; margin-right: auto;"} 

, 그것은 모델의 이미지와 함께 간단한 부트 스트랩 회전 목마입니다 : 이것은 내 코드입니다.

실제로는 수평으로 만 정렬되어 있으므로 큰 문제는 수직으로 정렬 할 수 있습니까?

도움 주셔서 감사합니다.

Answer 1

이 그 여전히 당신은 내가 더 필요 원하는 것을하지 않으면 당신이 여기 http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

를 참조 원하는없는 경우

.item.active{style: "text-align:center; vertical-align:text-top;"} 

이 라인

.item.active{style: "text-align:center"} 

교체 당신이하려는 일에 관한 정보. 당신이 수직 정렬을 무슨 일을하는지에 따라

Answer 2

내가 내 게시물을 편집 한이

.carousel-inner>.item>img { 
margin: 0 auto; 
height: 300px; 
}