Question

我正在尝试一个css挑战，其中要求指出：

并排绘制2个宽度为50px的正方形
每个正方形的中心应有一个圆圈，宽度为10px
两个正方形之间的距离应为10px

我似乎无法使自己的圈子出现。。这是我的小提琴-https://jsfiddle.net/xmozvs5p/

这是我的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;
    }

Answer 1

为.circle元素添加高度，并可以使用flexbox将其居中放置在父元素上。

.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>

Answer 2

您也可以用更少的代码尝试这种方式：

.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>

css-并排绘制2个正方形，每个正方形在中心

2 个答案: