Wie man einen Knopf mit Bootstrap zur Mitte ausrichtet?

Also mein Bild ist Vollbild (mit Ausnahme der Fußzeile) und meine Taste ist in der Mitte. Es funktionierte ganz gut, mein Button war in der Mitte, aber jetzt, wo ich mit dem Bootstrap begonnen habe und meinen Button gewechselt habe, ist mein Button ganz nach links vom Bildschirm verschoben und nicht der Center ... hat irgendjemand einen Lösungen?Wie man einen Knopf mit Bootstrap zur Mitte ausrichtet?

Anmerkung: Ich habe versucht,

<div class="wrapper text-center">

tun und es wäre immer noch nicht. Hier

ist ein Screenshot Ich nahm: https://gyazo.com/ce68d7b118156371ad02e7aa2a33ec2a

<!DOCTYPE html> 
    <html> 
    <head> 


     <title> 
     project 
     </title> 
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="../css/main.css"> 
    </head> 


    <body> 




    <div class="wrapper"> 
      <button type="button" class="btn btn-primary">Login with Facebook</button> 
     </div> 

     <div class="footer"></div> 

     <div class="download">Download</div> 

    </body> 
    </html>

dann ...

html,body{ 
     height:100%; 
     width:100%; 
     } 
    .wrapper { 
       display:flex; 
       align-items:center; 
       width:100%; 
       height:100%; 
       background-image: url("../img/space.jpg"); 
       background-repeat:no-repeat; 
       background-size:cover; 

     } 

     .button { 
      width:100px; 
      margin:auto; 
     } 

     .footer { 

    padding-top: 200px; 

     } 

     .download { 
      float: top; 
     }

Quelle

2017-01-16 mdlz

Sie die Taste vertikal oder horizontal –

@Naila es bereits vertikal zentriert über 'ausrichten-Elemente zentriert wollen: center;'. Ich nehme an, sie bedeuten horizontal zentriert. –

@MichaelCoker Danke für Ihre Information –

hinzufügen justify-content: center; zu .wrapper

html, 
 
body { 
 
height: 100%; 
 
width: 100%; 
 
} 
 
.wrapper { 
 
display: flex; 
 
align-items: center; 
 
width: 100%; 
 
height: 100%; 
 
background-image: url("../img/space.jpg"); 
 
background-repeat: no-repeat; 
 
background-size: cover; 
 
justify-content: center; 
 
} 
 
.button { 
 
width: 100px; 
 
margin: auto; 
 
} 
 
.footer { 
 
padding-top: 200px; 
 
} 
 
.download { 
 
float: top; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title> 
 
     project 
 
     </title> 
 
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> 
 
     <link rel="stylesheet" type="text/css" href="../css/main.css"> 
 
    </head> 
 
    <body> 
 
     <div class="wrapper"> 
 
     <button type="button" class="btn btn-primary">Login with Facebook</button> 
 
     </div> 
 
     <div class="footer"></div> 
 
     <div class="download">Download</div> 
 
    </body> 
 
</html>

Quelle

2017-01-16 04:18:41

Sie können dies einfach tun mit margin:0 auto;

.btn { 
    margin:0 auto; 
}

html, body { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 
.wrapper { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-image: url("../img/space.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
} 
 
.button { 
 
\t width: 100px; 
 
\t margin: 0 sauto; 
 
} 
 
.btn { 
 
\t margin:0 auto; 
 
} 
 
.footer { 
 
\t padding-top: 200px; 
 
}

<link rel="stylesheet" 
 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="wrapper"> 
 
    <button type="button" class="btn btn-primary">Login with Facebook</button> 
 
</div> 
 
<div class="footer"></div> 
 
<div class="download">Download</div>

Quelle

2017-01-16 04:23:05

Entschuldigung, ich bin neu im Bootstrap. Das hat aber funktioniert, danke! – mdlz

@mdlz Michael Coker Antwort war auch schön mit flex Eigenschaft versuchen, dass auch –

Wie man einen Knopf mit Bootstrap zur Mitte ausrichtet?

Antwort

Verwandte Themen