我的图像保持在移动状态,并且不会在中心对齐

时间:2015-01-30 10:59:20

标签: html css twitter-bootstrap media-queries

我有一个包含三张图片的部分。它在除移动设备之外的每个显示器上看起来都很完美,其中图像浮动。它们似乎与中心的起点一致。我的网站上的每个其他部分都完美对齐,因为boostrap行告诉他们。

<section id="press" class="parralax-window img-responsive" data-   parallax="scroll" data-image-src="img/dawn.jpg">
        <div class="row text-center">
            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <h2><strong>Omtale</strong></h2>
            </div>
                <div class="companies">
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
                        <a href="http://iphoneguide.dk/apps/svampeguide-til-svampejaegerne/"><img src="http://i.imgur.com/0ETpuAx.png" class="img-responsive" alt="Iphoneguide - SvampeGuide"></a>
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
                        <a href="http://politiken.dk/forbrugogliv/digitalt/ECE2412664/her-er-3-gode-apps-til-efteraaret/"><img src="http://i.imgur.com/8W49tLt.png" class="img-responsive" alt="Politiken - SvampeGuide"></a>   
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
                        <a href="http://spisesvampe.webbyen.dk/"><img src="http://i.imgur.com/pax4KwJ.png" class="img-responsive" alt="Spisesvampe - SvampeGuide"></a>
                    </div>
                </div>
        </div>
    </section>

我使用的是parralax插件,但我没有使用它就尝试了它,它似乎没有造成任何影响。

我的css:

#press {
    color: white;
    padding: 8em;
}
#press h2 {
    padding-bottom: 5%;
    font-size: 5vmax;
}

#press img {
    min-height: 30px;
    min-width: 150px;
    display: inline !important;
}

我也尝试删除了img-responsive类但没有帮助。

你知道造成这种情况的原因吗?

2 个答案:

答案 0 :(得分:2)

http://jsfiddle.net/wyLqa8w5/1/

#press {
    padding: 15%;
}

我认为你应该多看一下bootstrap。

例如,

<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">

可以缩短为

<div class="col-xs-12">

另外,请记得自行关闭图片代码:

<img src="" />

答案 1 :(得分:0)

<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <h2><strong>Omtale</strong></h2>
</div>

HeJ小鼠,

我很确定上面的代码是不正确的,你应该将col-md-12的div包含在包含img的所有3个col中 - 尝试一下。你能为我提供.img响应课吗?

我想看到它。