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;
}

我需要保持文本现在的位置（内联块）。这些圆圈在手机上显示为左对齐。任何帮助将不胜感激。

预先感谢：）

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;
}

它将完全正常工作。我只是将这些元素设置为块，为它们提供了自动边距，并为文本添加了一些顶部填充。

Answer 2

尝试以下代码以达到良好的设计效果，为达到良好的设计效果而进行一些更改，请在添加一行代码或大于大内容的情况下为所有内容垂直居中添加一个div垂直居中，并且在移动设备中以圆心居中。

.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: table;
  margin: 0 auto;
}
.vertical-center {
  display: table-cell;
  vertical-align: middle;
}
.circle h2 {
  margin-top: 0;
  margin-bottom: 15px;
}
.circle p {
  margin: 0;
}
.circle:hover {
  background-color:#79c852;
  color:white;
}

<div class="wpb_wrapper">
  <div class="circle">
    <div class="vertical-center">
      <h2 class="w-h2">
        <span style="color: #ffffff;">Step 3</span>
      </h2>
      <p>Run the&nbsp; popular Elite Edge training</p>
    </div>
  </div>
</div>

Answer 3

在圈子类之前添加div。这样，它将解决问题

<style>
.divCenter{margin:0 auto;text-align:center;}
</style>
    <div style="margin:0 auto;text-align:center;">
          <div class="circle"> 
             <h2><span style="color: #ffffff;">Step 1</span></h2> 
             <p>Tell us your team’s resilience and leadership goals</p>
          </div>

在手机中心对齐圆圈

3 个答案: