Need to draw Circle with CSS like this

user_5013994 0
Viewed 361

Need to draw circle onto which I place image icon like this by applying CSS as shown in image below. Tried the code but unable to accomplish it. Please help. Required: enter image description here

HTML:

.dot {
  height: 505px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
<div style="text-align:center">
  <h1>Round Dots / Circles</h1>
  <span class="dot"></span>
</div>

css html
6 Answers

i have create as you want. please check. if this helpful please hit the green check. thanks

.dot {
  height: 200px;
  width: 200px;
  background-color: #fff;
  border-radius: 50%;
  border: 5px solid grey;
  display: inline-block;
  text-align:center;
}
.dot h3 {
      font-size: 23px;
      margin:0;
}
.dot-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
}
.dot2 {
      display: table;
}
.dot-box2 {
      display: table-cell;
    vertical-align: middle;
}
<h2>
Circle With Flex
</h2>
<div class="dot">
<div class="dot-box">
<img src="https://i.ibb.co/QcHsj9z/user.jpg">
  <h3>
  MEMBER FEATURE
  </h3>
</div>
</div>

<br>
<h2>
Circle With Table
</h2>
<div class="dot dot2">
<div class="dot-box2">
<img src="https://i.ibb.co/QcHsj9z/user.jpg">
  <h3>
  MEMBER FEATURE
  </h3>
</div>
</div>

user_130101660

Make the width and height the same

.dot {
  height: 50px;
  width: 50px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
<div style="text-align:center">
  <h1>Round Dots / Circles</h1>
  <span class="dot"></span>
</div>

user_108348280

For A Circle, Height and Width should be same.

.dot {
height: 200px;
width: 200px;
background-color: #bbb;
border-radius: 50%;
// Below Code is For Placing content in the Center of Circle
display: flex;
flex-direction:column;
justify-content: center;
align-items:center;
}

<div class="dot">
<div class="content">
<h1>Round Dots / Circles</h1>
</div>
</div>
user_33238290

Height should be same as width.

.dot {
  height: 505px;
  width: 505px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
<div style="text-align:center">
  <h1>Round Dots / Circles</h1>
  <span class="dot"></span>
</div>

Admin1

Here is the code pen link: https://codepen.io/wahabshah/pen/YzELexr

.dot {
  height: 200px;
  width: 200px;
  background-color: #bbb;
  border-radius: 50%;
  border: 5px solid grey;
  display: inline-block;
}

Also for inside content use display : flex and use column for displaying them vertically.

user_59962760

Height and width must be equal to form a circle and border-radius of 50%

user_176687430
Related