html - 我的图像在移动设备上保持正确并且未居中对齐

标签 html css twitter-bootstrap media-queries

我有一个包含三张图片的部分。它在每个显示器上看起来都非常好,除了移动设备,图像会正确 float 。它们似乎与中心的起点对齐。我网站上的每个其他部分都按照 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 类,但这没有帮助。

你知道是什么原因造成的吗?

最佳答案

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="" />

关于html - 我的图像在移动设备上保持正确并且未居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28234390/

相关文章:

javascript - 显示 UL 中的所有 LI,而不是仅显示单击的 LI。

css - Bootstrap 静态弹出窗口

html - 如何禁用 Bootstrap 表单验证?

jquery - 如何在悬停时更改箭头的颜色?

javascript - 表单提交后是否重定向?

javascript - 动态数据目标 Bootstrap 模式-Django

javascript - jQuery:在字段中发生自动完成后删除错误

html - 垂直和水平对齐文本

css - Bootstrap Modal 在不需要时调出 slider ?

html - 主体背景的图像为 1374x1074,但在缩放时 -- 出现白色背景