如何使用CSS将reCAPTCHA元素居中

如果你是设计师, 并且希望以网页为中心, 则不必担心, 你不会有任何强迫症。当元素周围有空间(左右两侧)时, 将元素居中非常好, 这样空间就不会停留在一侧。

使用著名的reCAPTCHA元素, 如果你不知道哪个CSS规则分别适用于哪个元素, 则很难使复选框居中, 这就是为什么我们在本文中将与你分享一种简单的方法来将元素居中形式。

首先, 使该元素居中的必要逻辑是将文本居中在reCAPTCHA元素的容器内, 因此你可以将该元素包装在div内, 并将recaptcha元素的显示规则设置为inline-block, 以便创建2类：

<style>
    .text-center {
        text-align: center;
    }

    .g-recaptcha {
        display: inline-block;
    }
</style>

<div class="text-center">
    <div class="g-recaptcha" data-sitekey="YOUR SITE KEY"></div>
</div>

或者, 定义内联样式：

<div style="text-align: center;">
    <div
        class="g-recaptcha" 
        data-sitekey="YOUR SITE KEY" 
        style="display: inline-block;"
    ></div>
</div>

使用上述解决方案, 你的reCAPTCHA元素将在页面中居中。

编码愉快！