Align button in center wordpress

1

I've tried a lot of things and I can not really align this wordpress "forgot password" button on the login page.

wp-full login: link

<?phpif(!$interim_login){?><pclass="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 } ?>
    
asked by anonymous 02.03.2018 / 15:35

2 answers

0

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

Put it there like this

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

Optionnumber2,workdirectlyonthebuttonandletitthesizeofthecontainer,thus

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

OBS:Asthissameclasscanberepeatedinotherelementsofotherpages,consider"encapsulating" the classes only for login type .login .mx-auto {estilos...}

OBS2: Of the two ways it is responsive without bugs

    
02.03.2018 / 16:20
0

On line:

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

Add

<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 perhaps you should insert the mx-auto .text-center (Bootstrap 4) or .center-block .text-center (Bootstrap 3) classes in the container instead of the

    
02.03.2018 / 16:00