在WP模板中居中短代码

Question

我的WP模板的一部分包含一个短代码 - 然而，无论我尝试什么技巧，它都会左对齐而不是中心。 它是一个简单的倒数计时器，我在其中输入日期变量。我认为这是一个让CSS工作的简单设置，但是我在这里用头撞墙。

任何猜测？

echo '<div class="countdown-wrapper">';
echo do_shortcode("[circularcountdown endDate=\"$date3\"]");
echo '</div>';

来自css：

.countdown-wrapper {
margin-left: auto;
margin-right: auto;
display: inline-block;
text-align: center;
width: 100%;
}

谢谢！

示例：www.stonecalendar.com/dbstuff

Answer 1

尝试： -

.countdown-wrapper {
display: table;
margin: 0 auto;
}

Answer 2

输出的短代码可能是块级元素。

您仍然可以在容器中执行此操作，但是您需要为其指定固定宽度，而不是将其显示为inline-block：

.countdown-wrapper {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 200px;
}

将200px替换为元素的宽度。

如果它是可变宽度，您可能需要直接修改生成的标记的样式。

Answer 3

这对我有用：

.countdown-wrapper {
  display: block;
  margin: auto;
  text-align: center;
  width: 50%;
}