Question

我在bootstrap的帮助下设计了一个页面，其中包含2个图像图标。

<div class="container">
    <div class="text-center vcenter"><label  class="Title">Page title</label></div>
    <div class="span7 center" style="height:100%; padding-top:5%">
        <div style="float:left; text-align:center;"><img src="images/image1.png" class="img-responsive"></img><label class="iconText">Icon Text1</label> </div>
        <div style="float:right; text-align:center;"><img src="images/image2.png" class="img-responsive"></img><label class="iconText">Icon Text2</label> </div>
    </div>


</div>

CSS：

body {
    background: url('images/3D/landing.jpg') no-repeat center center fixed;
}

我需要在移动设备的垂直方向和水平方向的同一条线上将这两个图像一个接一个地对齐。

感谢。

Answer 1

使用bootstraps网格系统为您完成艰苦的工作。 http://getbootstrap.com/css/#grid

将col-md-6添加到div类意味着您的div将在移动设备和平板电脑设备上开始堆叠在一起，然后在桌面上变为水平。在bootstrap中读取网格系统。

<div class="col-md-6" style="float:left; text-align:center;"><img src="images/image1.png" class="img-responsive"></img><label class="iconText">Icon Text1</label></div>
<div class="col-md-6" style="float:right; text-align:center;"><img src="images/image2.png" class="img-responsive"></img><label class="iconText">Icon Text2</label> </div>

如果您需要更多帮助，请与我们联系。

P.S。我保留了你的内联样式，但尝试使用外部样式表，以便你的HTML不会变得如此混乱

根据设备方向引导程序对齐页面元素

1 个答案: