1

Já tentei um monte de coisas e não consigo de jeito nenhum alinhar ao centro esse botão de "esqueceu a senha" do wordpress da página de login.

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

inserir a descrição da imagem aqui

    <?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 } ?>
3
  • Tente: .button .button-primary .button-large { text-align:center !important; } Está meio difícil para entender o que vc quer... Tem como postar uma imagem de onde o BTN está e de onde vc queria que ficasse?
    – hugocsl
    2/03/2018 às 14:56
  • Não funcionou, adicionei uma imagem. 2/03/2018 às 15:06
  • wp-login completo: pastebin.com/7RBesXpG 2/03/2018 às 15:08

2 Respostas 2

0

Vc tem duas opções, a primeira é trabalhando com essa div <div class="mx-auto">

Nela coloque assim

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

inserir a descrição da imagem aqui

Opção número 2, trabalhar direto no botão e deixar ele do tamanho do container, dessa forma

.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;
}

inserir a descrição da imagem aqui

OBS: Como essa mesma classe pode se repetir em outros elementos de outras página considere "encapsular" as classes só para o login tipo .login .mx-auto {estilos...}

OBS2: Das duas forma fica responsivo sem bugs

2
  • muuuiitoo obrigado, funcionou, preferi usar sua segunda opção, muito obrigado mesmo. 2/03/2018 às 15:25
  • Daniel inclusive eu estava vendo aqui e a primeira opção não estou achando a classe .mx-auto novamente rss... queria testar nela uma classes, Mas de qualquer forma que bom que resolveu!
    – hugocsl
    2/03/2018 às 15:27
0

Na linha:

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

Acrescente

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

Ou

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

Mas talvez você deverá inserir as classes mx-auto .text-center (Bootstrap 4) ou .center-block .text-center (Bootstrap 3) no container e não no parágrafo

5
  • Não funcionou, adicionei uma imagem. 2/03/2018 às 15:06
  • wp-login completo: pastebin.com/7RBesXpG 2/03/2018 às 15:08
  • Tem como você informar o link da página pra que eu possa testar o alinhamento no container, parte do código não me ajuda muito a te ajudar.
    – ElvisP
    2/03/2018 às 15:20
  • vlw pela força, mas o camarada ali chegou primeiro rsrsrs.. mas vlww mesmo abraço 2/03/2018 às 15:25
  • O importante é que deu certo.
    – ElvisP
    2/03/2018 às 15:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .