Placing text in the middle of the circle

HTML-CSS
1

I tried absolute positing, margin auto, that didn’t work

I tried these, they had no effect.

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;

code: https://jsfiddle.net/fLmhnyz1/1/

.image {
  position: relative;
  display: inline-table;
  overflow: hidden;
}

span {
  font-size: 14px;
  color: #892CDC;
  text-align: center;
  font-family: New Times Roman;
}

.layer {
  display: flex;
  width: 154px;
  height: 154px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 50px;
  box-shadow: 0 0 0 500px blue;
}

.layer2 {
  margin: auto;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 0 150px white;
  border-radius: 50%;
  overflow: hidden;
}

<div class="image">
  <img src="https://picsum.photos/500" width="500" alt="Sea View">

  <div class="layer">

    <div class="layer2">
      <span>“Some Text Here”</span>
    </div>
  </div>
</div>
2

There is a way to do what you want using position: absolute; but I don’t see where you’ve tried it in your fiddle.

Have you tried searching?
As a search term I tried css position text in center of parent container and was able to find to successfully do what you want.

Screen Shot 2021-07-02 at 23.05.25

Here’s something I did a while ago that shows the centered text better. And to be completely honest/transparent, I used that same search term to find out how to center the text
Screen Shot 2021-07-02 at 23.35.35

3

This worked.

code: https://jsfiddle.net/083brwqu/

.image {
  position: relative;
  display: inline-table;
  overflow: hidden;
}

.layer {
  display: flex;
  align-items: center;
  width: 154px;
  height: 154px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 5px;
  box-shadow: 0 0 0 50px blue;
}

.layer2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 0 150px white;
  border-radius: 50%;
  overflow: hidden;
}
  span {
    font-size: 14px;
    color: #892CDC;
    font-family: New Times Roman;
  }

<div class="image">
  <img src="https://picsum.photos/200" height="200" alt="Sea View">

  <div class="layer">

    <div class="layer2">
      <span>“Some Text Here”</span>
    </div>
  </div>

</div>
4

Nice job.

Since you had mentioned using position: absolute; and wanting the text in the middle of a circle I took the liberty of changing your code slightly to show another way to do it.
You can find it in this sample pen.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.