Css 在手机上对齐圆心

我试着在手机上把圆圈对准中心。这是我用过的

我现在需要把文本放在块内。这些圆圈在手机上显示为左对齐。任何帮助都将不胜感激

---

提前感谢：

请将您的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;
}

---

它会工作得非常好。我只是让这些元素块给它们一个自动边距，并给文本添加一些顶部填充。

在circle类之前添加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>

---

请尝试以下代码以获得良好的设计。如果要获得良好的设计，请为所有内容垂直中心添加一个div。当您添加一行代码或多个大型内容集垂直中心时，请在手机中为所有内容垂直中心添加一个div

.圆圈{ 宽度：240px； 高度：240px； 边界半径：50%； 字体大小：24px； 颜色：fff； 线高：30px； 文本对齐：居中； 背景：ea4335； 垂直对齐：顶部； 显示：表格； 保证金：0自动； } .垂直中心{ 显示：表格单元格； 垂直对齐：中间对齐； } .圈h2{ 边际上限：0； 边缘底部：15px； } .圆圈p{ 保证金：0； } .圆圈：悬停{ 背景色：79c852； 颜色：白色； } 步骤3 运行流行的精英边缘训练

---

因为您的圆是内联块，所以只需将文本对齐：居中；在它们的父元素上。今后，请确保您试图解决的问题存在于问题本身，而不依赖其他网站/页面等外部资源。如果这个资源被删除了，你的问题对未来的读者来说几乎毫无用处。你可能在wordpress网站上使用js composer插件。只需在js composer中选择将项目对齐到中心即可。编辑专栏，你们会在那个里找到它。@TylerRoper，很抱歉这么晚才回复！我试过你的建议，但是运气不好。非常感谢，老兄！祝你有美好的一天！没有“垂直中心”对我来说效果很好。你和Shaharyar的解决方案都有效。非常感谢。4 wpb_包装使用内联-单独。从Dharmesh和Shaharyar那里找到了解决方案。谢谢您：

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