CODEWITHSUNDEEP
css
rory-h
rory-h

Reputation: 680

css - draw 2 squares side by side and each with a circle in the center

I'm trying out a css challenge where the requirements state that:

I can't seem to make my circle appear.. Here's my fiddle - https://jsfiddle.net/xmozvs5p/

Here's a snippet of my css:

  .square {
    width:50px;
    height:50px;
    border:1px solid black;
    display:inline-block;
    margin:10px;
  }
  .circle{
    background-color:green;
    border-radius: 50%;
    width:10px;
    display:block;
    margin:auto;
    }

Upvotes: 0

Views: 3691

Answers (2)

Temani Afif
Temani Afif

Reputation: 273004

You can also try this way with less of code:

.square {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  background:radial-gradient(circle at center,green 5px,transparent 6px);
  margin: 10px 5px;
}
<div class="square">
</div>
<div class="square">
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115109

Add a height to the .circle element and it can be centered using flexbox on the parent.

.square {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 10px 5px; /* 10px between elements */
}

.circle {
  background-color: green;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: block;
  margin: auto;
}
<div class="square">
  <div class="circle"></div>
</div>
<div class="square">
  <div class="circle"></div>
</div>

Upvotes: 2

Related Questions