我的图像在移动设备上保持正确并且未居中对齐
My images stay right on mobile and don't align in the center
我有一个包含三张图片的部分。它在每个显示器上看起来都非常好,除了移动设备,图像会正确浮动。它们似乎与中心的起点对齐。我网站上的每个其他部分都按照 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 class 但这没有帮助。
你知道是什么原因造成的吗?
<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 列周围 - 试试吧。此外,您可以向我提供 .img-responsive class?
我想看看
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="" />
我有一个包含三张图片的部分。它在每个显示器上看起来都非常好,除了移动设备,图像会正确浮动。它们似乎与中心的起点对齐。我网站上的每个其他部分都按照 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 class 但这没有帮助。
你知道是什么原因造成的吗?
<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 列周围 - 试试吧。此外,您可以向我提供 .img-responsive class?
我想看看
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="" />