html - 在 div 的边框上居中图像

Question

我正在努力实现这个设计:
黑圈是一个图像(忽略矩形)。我现在不知道如何让它工作，e。 G。使圆圈在边界上居中。也许你们中的一些人可以做到这一点？
我做了一个jsfiddle所以你可以玩弄它。

StackOverflow 的 HTML:

 <div class="container">
    <div class="manager-textbox">
      <img src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" class="manager-portrait" style="height:100px">
      <div class="manager-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor malesuada mauris, sit amet tempus erat dictum eget.
          In eleifend arcu augue. Quisque enim est, eleifend vitae est nec, gravida congue ligula. Proin id convallis
          turpis.
        </p>
      </div>
    </div>       
  </div>

Answer 1

试试这个:

DEMO HERE

CSS

// managers
.manager-headline {
    font-size: 24px;
    color: $xcellent-blue;
    text-align: center;
}

.manager-textbox {
    background-color: #f4f6f9;
    box-shadow: 0 -3px 0 0 #303f9f;
    position: relative;
    margin-top: 60px;
}

.manager-text {
    margin-top: 40px;
    padding-top: 90px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

#manager  .teaser-header-what {
    padding-left: 0px;
}
.manager-portrait {
 position: absolute;
 top: -50px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 border-radius: 50%;
 border: solid 2px red;
}