Question

我只是想知道是否有更优雅的解决方案来实现以下

我试图将头像图像放在两个div的垂直中间，如下所示： http://notch.tumblr.com/ 是否有一个bootstrap css类来实现这一点，所以我不必自己添加这些？

Answer 1

所需要的一切：

<div class="roundedCenter">
    <div></div>
</div>

CSS：

.roundedCenter > div{
  /*Change or remove and set as a separate class:  */
  width:160px; height:160px;

  /*Don't change:  */
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  left:50%;
  background:#fff;
  box-shadow: 0 5px 7px rgba(0,0,0,0.1);
  border-radius:50%;
}

＆＃13;

.row{height:150px;}


.roundedCenter > div{
  /*Change:  */
  width:160px; height:160px;
  
  /*Don't change:  */
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  left:50%;
  background:#fff;
  box-shadow: 0 5px 7px rgba(0,0,0,0.1);
  border-radius:50%;
}

＆＃13;

<div class="row" style="background:#f8a;"></div>
<div class="roundedCenter">
  <div></div>
</div>
<div class="row" style="background:#8af;"></div>

＆＃13;

两个div之间的头像图片

1 个答案: