Css 如何将这些输入元素放在页面中心，使下面的div完全对齐，并将前面的span元素保持在左侧？

我有3个输入，前面有一个span，后面有一个div，最后一个在后面紧跟着一个I元素：

<div class="container-fluid">
    <form id="recaptcha_form"> 
        <fieldset class="form-group">
            <legend class="form_legend">Create Account</legend>
            <div class="form_field"> 
                <span class="validate_symbol">&#10007;</span>
                <input type="text" class="register_field" id="id_username">
                <div style = "display:none" class="error" aria-live="polite"></div>
            </div>
            <div class="form_field"> 
                <span class="validate_symbol">&#10007;</span>
                <input type="text" class="register_field"id="id_username">
                <div class="error" aria-live="polite"></div>
            </div>
            <div class="form_field"> 
                <span class="validate_symbol" >&#10007;</span>
                <input type="text" class="register_field"id="id_username">
                <i id="password_toggle">SHOW</i>
                <div class="error" ></div>
            </div>
        </fieldset>
    </form>
</div>

其结果是：

我还添加了CSS：

body{
  text-align: center;
}
form {
    display: inline-block;
}

其结果是：

.error div仍然没有与上述输入完全对齐，并添加了“show”文本，导致密码字段未对齐

我希望将输入元素居中，同时在所有屏幕尺寸上保留.validate_符号元素，并将.error div与上述输入元素完全对齐。谢谢您的建议。

我重新创建了您的代码（简化了类名），结果如下：

这里是我的代码，希望对大家有所帮助！

body{
  text-align: center;
}
form {
    display: inline-block;
}