css - 在手机上将圆圈居中对齐

Question

我正在尝试在移动设备上将圆圈居中对齐。这是我在 https://www.wmhi.com.au/elite-edge-leadership-resilience/ 上使用的内容

.circle {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  background: #ea4335;
  vertical-align: top; 
  display: inline-block;

}
.circle:hover {
background-color:#79c852;
color:white;
}

我需要将文本保持原样(行内 block )。圆圈在手机上显示为左对齐。任何帮助将不胜感激。

提前致谢:)

Answer 1

请更改您的 CSS

.circle {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    background: #ea4335;
    vertical-align: top;
    display: inline-block;
}

为此

.circle {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    background: #ea4335;
    vertical-align: top;
    display: block;
    padding-top: 10px;
    margin: auto;
}

而且它会工作得很好。我只是让这些元素 block 给它们一个自动边距，并给文本一些顶部填充。