在 wordpress 中使用附加 css 使 div 类居中时遇到问题答案

【问题标题】：Trouble using addiontal css in wordpress to center a div class在 wordpress 中使用附加 css 使 div 类居中时遇到问题
【发布时间】：2019-02-08 05:21:26
【问题描述】：

在我的 WordPress 网站页脚中将 div 类居中时遇到问题（使用 CPO 主题）。

我想调用我在 HTML 中创建的变量，并使用我的 WordPress 网站主题中的附加 CSS 对其进行格式化。

创建 div 类示例后，我想通过 CSS 使用自动边距使徽标居中

#example {
  margin-left: auto ;
  margin-right: auto ;
}

<div class="example">     
  <div class="ctwg-social">
    <a class="ctwg-social-link ctwg-social-facebook" href="https://www.facebook.com/example" title="Facebook"><span class="ctwg-social-icon"></span></a>
  </div>
</div>

我也试过打电话给<class id="example">，但也没有用。

【问题讨论】：

这听起来像是specificity 问题？这或者可能与更深入地研究居中有关：stackoverflow.com/questions/114543/…
将左右边距设置为自动会导致 div 自身居中，但仍将是 100% 宽度，因此不会有明显差异。也尝试给它一个max-width 属性，比如 60%
@andrew 谢谢安德鲁，这对我有用！
由于您试图将内联元素（锚点和跨度）居中，.ctwg-social {text-align: center} 可能是最好的方法

标签： html css wordpress

【解决方案1】：

使图像居中：使其成为自己的块并对其应用边距属性。将此添加到您的 CSS：

  display: block;

【讨论】：

【解决方案2】：

玩max-width: #%; 对我有用，谢谢安德鲁的回答！

【讨论】：

没问题，看我上面的第二条评论，这可能是一个更好的方法
这实际上不起作用，因为它不能完全居中，只能关闭，100% 后它似乎什么也没做
文本对齐也不起作用，它在页面中心的左侧（图标）
可能其他项目有一个边距抵消它，您也可以使用transform: translate(-50%,-50%) 移动它。（使用 %values 将它们水平和垂直定位）
我通过同时使用这两种方法暂时解决了该解决方案，但使用 max-width: 41%...如果我使用 40% 的图标之一，它仍然稍微偏离左侧中心尝试使用（共 3 个）将下降到下面的行