0

I have an image of myself that I want to center in text. It is a circle so I am using shape-outside but I cannot find a way to center it in my text and have it actually create a circle in the middle of my text.

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%;
}

I have tried several things and have found no way to make the text wrap around it properly.

Shniper
  • 854
  • 1
  • 9
  • 31
  • I'm not sure if you can accomplish that simply with html & css, you can refer to this [question/answer](http://stackoverflow.com/questions/18851327/image-inside-text-block-css). I think is similar to your question – Diego Dec 14 '16 at 05:45
  • Are you looking like this? https://jsfiddle.net/rd0tghx6/1/ – Suresh Ponnukalai Dec 14 '16 at 06:27

0 Answers0