【问题标题】:My images stay right on mobile and don't align in the center我的图像在移动设备上保持正确,并且不在中心对齐
【发布时间】:2015-03-29 20:09:57
【问题描述】:

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

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

【问题讨论】:

  • #press { 填充:8em; } 导致它

标签: html css twitter-bootstrap media-queries


【解决方案1】:

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

#press {
    padding: 15%;
}

我认为你应该多研究一下引导程序。

例如,

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

可以简写为

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

另外,记得自行关闭你的图片标签:

<img src="" />

【讨论】:

  • 完美运行,谢谢。我在 css 中使用 em 的次数不多。我认为它具有与百分比相同的功能。
  • 看这个:stackoverflow.com/questions/15311338/… - 'em 单位总是相对于字体大小。'希望对您有所帮助。
【解决方案2】:
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <h2><strong>Omtale</strong></h2>
</div>

嘿嘿,

我很确定上面的代码不正确,您应该将 col-md-12 的 div 包裹在包含 img 的所有 3 个 cols 周围 - 试试看。此外,您能否为我提供 .img-responsive 类?

我想看看。

【讨论】:

  • 正如 Sirence 回答的那样,填充:8em;在#press 上听起来确实有点过分
  • .img-responsive 作为类包含在引导程序中。但是将填充形式 8em 更改为 15% 解决了这个问题。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-11-07
  • 2020-08-16
  • 2023-03-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多