在Bootstrap中将一张图片居中放置在另一张图片内部

Question

我已经添加了一个class为“img-circle”的图片。我需要把另一张小图片放在这个图片的中心位置，这个位置适用于所有设备。

请问有人能告诉我如何解决这个问题吗？

- lalith458

Answer 1

将以下 CSS 代码添加到您的 CSS 文件中。

.img-circle{position:relative}
anothor-image-selector:{position:absolute;margin:auto;top:0;left:0;bottom:0;right:0}

想了解这种方法的优点和缺点，请查看以下文章：

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

- The Mighty Programmer

---

谢谢，我使用了上面的CSS，但是当我调整浏览器大小时，第二张图片的位置会移动，而不是固定在第一张图片的中心。 - lalith458

Answer 2

演示: http://jsbin.com/IyAkoYA/2

<!-- begin image within image :: background size cover does not work in IE make sure you don't exceed the width of the actual image -->

 <div class="circle-wrapper">
  <span class="force-ratio"></span>
  <div class="img-container align-center">
   <div class="center-block-valign"></div>
   <img class="img-circle" src="http://placehold.it/250x250/000000&text=image+2" alt="">
   </div><!--img-container align-center-->
  </div><!--circle-wrapper--> 

 <!-- end image within image -->


.circle-wrapper * {
 box-sizing:content-box;
 -moz-box-sizing:content-box;
 -webkit-box-sizing: content-box 
}

.circle-wrapper {
 position: relative;
 width: 100%;
 box-sizing:content-box;
 -moz-box-sizing:content-box;
-webkit-box-sizing: content-box 
 background-image:url(http://placehold.it/400x400/ff6600/FFFFFF&text=image+1);
 background-position:50% 50%;
 background-size:cover;
 background-repeat:none;
 border-radius:50%;
 max-width:400px;
 max-height:400px;
}

 .force-ratio {
 padding-top: 100%;
 display:block;
 }

.img-container {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}

.align-center {
 text-align:center;
 font: 0/0 a;
}

.center-block-valign {
 display: inline-block;
 vertical-align: middle;
 height: 100%;
}

.circle-wrapper .img-circle {
 vertical-align: middle;
 display: inline-block;
 max-width:50%;
 padding:25%;
}

很多这方面的资料都可以通过搜索"如何在一个图片中心放置另一张响应式图片"来找到，这篇http://jsbin.com/aXiReCub/1/edit文章也提供了一些帮助。但是，由于BS3使用全局的border-box尺寸，需要进行一些调整。

- Christina

Answer 3

box-sizing:contant-box;

请使用这段代码。希望能对您有所帮助。

- Bipin Kumar Pal

---

你能详细解释一下吗？ - lalith458

background-position:50% 50%; 使用 - Bipin Kumar Pal

box-sizing: content-box。修正拼写错误。 - Christina