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的人来说，它是一个简单的bootstrap轮播，带有模特的图片。

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

感谢您的帮助！

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中无处不在

Answer 2

试试这个

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

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

2 个答案: