Question

我添加了一个类“img-circle”的图像。我需要在该图像的中心放置另一个小图像，该图像是所有设备的中心。

任何人都可以告诉我如何解决这个问题。

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/

Answer 2

DEMO： 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中使用Google搜索“中心响应式图像在另一个图像中”找到了大部分内容。然后，因为BS3使用全局边框大小调整，所以需要进行调整。

Answer 3

box-sizing:contant-box;

使用此代码。我希望能帮到你。

将图像置于Bootstrap中的另一个图像中心

3 个答案:

DEMO： http://jsbin.com/IyAkoYA/2