我正在尝试一个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;
    }

最佳答案

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

关于css - css-并排绘制2个正方形,每个正方形在中心都有一个圆,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53837514/

10-10 23:17
查看更多