Bootstrap 3-如何将另一个图像上方的图像与响应对齐？答案

【问题标题】：Bootstrap 3- How to align images above another image with responsive?Bootstrap 3-如何将另一个图像上方的图像与响应对齐？
【发布时间】：2014-03-12 07:50:03
【问题描述】：

我是 Bootstrap 的新手。有人可以帮助我在引导程序中使用响应性将图像对齐和重叠在另一个图像上。我试过了。

HTML:
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="images/book_bg.png" class="img-responsive"/>
<ul class="row">
<li class="col-lg-6"><img src="images/Desert.jpg" class="img-responsive"/></li>
<li class="col-lg-6"><img src="images/Hydrangeas.jpg" class="img-responsive"/> </li>
</ul>
<ul class="row">
<li class="col-lg-6"><img src="images/Jellyfish.jpg" class="img-responsive"/></li>
<li class="col-lg-6"><img src="images/Koala.jpg" class="img-responsive"/> </li>
</ul>
</div>
</div>
</div>

CSS： ul { 宽度：100%； } 李{ 宽度：49%；向左飘浮; }

问题：图像未与背景对齐，如图所示。帮助？ https://drive.google.com/file/d/0Bwyjk1QbhhGGRVZxZkgxMk5RNlk/edit?usp=sharing 在这里下载图片

【问题讨论】：

你可以尝试偏移到像col-lg-offset-*这样的位置
images/book_bg.png 应该是背景（通过 CSS），或者你应该使用绝对定位
您好，感谢您的回复。我将 css 更改为 Position:absolute 并且工作正常。并且还使用 col-offset 我可以左右移动内部图像，反之亦然。但是，要使其顶部/底部对齐，是否有任何可用的属性，或者我必须简单地使用 CSS 属性，如（margin-top、margin-bottom、padding）？有人可以告诉我有关对齐图像顶部和底部的信息吗？

标签： css twitter-bootstrap

【解决方案1】：

在这部分 HTML 中包含一个 id，例如：

<img src="images/book_bg.png" class="img-responsive" id="background_image"/>

然后为这个id添加一个带有绝对位置的CSS：

#background_image {position: absolute}

关于评论中的垂直对齐：

您可以找到许多与此相关的问题。以下是几个例子：

Question 1 Question 2 Question 3

【讨论】：

您好，感谢您的回复。我将 css 更改为 Position:absolute 并且工作正常。并且还使用 col-offset 我可以左右移动内部图像，反之亦然。但是，要使其顶部/底部对齐，是否有任何可用的属性，或者我必须简单地使用 CSS 属性，如（margin-top、margin-bottom、padding）？有人可以告诉我有关对齐图像顶部和底部的信息吗？
@GaganNaidu 我已经用几个关于垂直对齐的链接更新了我的答案。