在文本中心浮动一个圆圈

Question

我有自己的形象，我想以文字为中心。这是一个圆圈，所以我使用的是shape-outside，但是我无法找到一种方法将它放在我的文本中心并让它实际上在我的文本中间创建一个圆圈。

JSFIDDLE

#about {
    height: 100vh;
    width: 100vw;
  overflow: hidden;
}

#about_wrap {
    height: 70%;
    width: 80%;
    position: relative;
    left: 10%;
    top: 20%;
}

#photo {
    float: left;
    shape-outside: circle(50%);
    shape-margin: 15px;
    width: 30vw;
    height: 30vw;
    margin-left: 30%;
    margin-top: 10%;
}

#photo img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

我已经尝试过几件事，并且没有办法让文本正确地包裹它。