CODEWITHSUNDEEP
csscss-shapes
Aessandro
Aessandro

Reputation: 5761

CSS circle with dynamic text inside

I need to build a circle shape (in css) which has 2 lines of text that could change in length based on translation selected and always centered.

So far I have this:

h3 {
  background-color: #fcd141;
  border-radius: 50%;
  padding: 12px 5px 5px 5px;
  margin-top: 30px;
  width: 20%;
  height: 20%;
}
<h3>
  <span style="vertical-align: middle;">98%</span>
  <span style="margin-top: -4px; display: block;">Ratingfasdasfasfsad</span>
</h3>

The circle needs to respond dynamically to the length of the text keeping the aspect ration intact.

Upvotes: 3

Views: 8559

Answers (2)

Tushar Gupta
Tushar Gupta

Reputation: 15923

You can have a look at the code as in your code it looks like an ellipse to me

.circle-text {
  width: 50%;
  padding 10px;
}
.circle-text:after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: #4679BD;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.circle-text div {
  float: left;
  width: 100%;
  padding-top: 50%;
  line-height: 1em;
  margin-top: -0.5em;
  text-align: center;
  color: white;
}
<div class="circle-text">
  <div>I'm asddddddssssssssssssssssssasdasdashd asfafjsldfashdfisdpf sdjf pe!</div>
</div>

Upvotes: 7

jbutler483
jbutler483

Reputation: 24559

You could use vw (view width units) for this:

note

transform is used for vertical alignment only.

h3 {
  background-color: #fcd141;
  border-radius: 50%;
  padding: 20px;
  margin-top: 30px;
  width: 20vw;
  height: 20vw;
  text-align: center;
  word-wrap: break-word;
  position: relative;
}
h3 span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
    <span>  98% <br />
        Ratingfasdasfasfsad</span>
    </h3>

I was also able to remove your inline styling, and combined your two spans into one.

Upvotes: 1

Related Questions