Align button on wordpress center

Question

I’ve tried a lot of things and can not at all align to the center this "forgot password" wordpress button of the login page.

wp-login full: https://pastebin.com/7RBesXpG

    <?php if ( ! $interim_login ) { ?>
<p class="button button-primary button-large">
<?php if ( ! isset( $_GET['checkemail'] ) || ! in_array( $_GET['checkemail'], array( 'confirm', 'newpass' ) ) ) :
    if ( get_option( 'users_can_register' ) ) :
        $registration_url = sprintf( '<a href="%s">%s</a>', esc_url( wp_registration_url() ), __( 'Register' ) );

        /** This filter is documented in wp-includes/general-template.php */
        echo apply_filters( 'register', $registration_url );

        echo esc_html( $login_link_separator );
    endif;
    ?>
    <a style="color: #FFFFFF" href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
<?php endif; ?>
</p>
<?php } ?>

Answer 1

On the line:

<p class="button button-primary button-large">

Appendage

<p class="button button-primary button-large mx-auto text-center"> // Bootstrap 4

Or

<p class="button button-primary button-large center-block text-center"> // Bootstrap 3

But maybe you should insert the mx-auto classes . text-center (Bootstrap 4) or . center-block . text-center (Bootstrap 3) in the container and not in the paragraph

Answer 2

You have two options, the first is working with this div <div class="mx-auto">

Put it like this

.mx-auto {
    display: flex;
    justify-content: center;
}

Option number 2, work directly on the button and leave it the size of the container, this way

.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {
    height: 30px;
    line-height: 28px;
    padding: 0 12px 2px;
    width: 100%;
    text-align: center;
}

OBS: As this same class can repeat itself in other elements of other page consider "encapsulate" the classes only for login type .login .mx-auto {estilos...}

OBS2: Both ways is responsive with no bugs