html - 放置图像垂直和水平对齐的 HTML

Question

我想将图像放置在水平和垂直对齐的旋转木马中。这是我的代码:

#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;"}

对于那些不了解 HAML 的人来说，这是一个简单的引导轮播，带有来自模型的图像。

实际上只是水平对齐，所以最大的问题是..我怎样才能垂直对齐呢？

感谢您的帮助!

Answer 1

替换这一行

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

与

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

如果这不是您想要的，请看这里 http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

如果这仍然不是您想要的，我需要更多关于您正在尝试做什么的信息。取决于你在做什么，垂直对齐在 HTML 中的所有地方都不一样