Как выровнять кнопку с центром с помощью бутстрапа?

Итак, мое изображение полноэкранное (кроме нижнего колонтитула), а моя кнопка находится посередине. Он работал отлично, моя кнопка была в центре, но теперь, когда я начал работать с бутстрапом и менял свою кнопку, моя кнопка сдвигалась полностью влево от экрана, а не в центре ... у кого-нибудь есть решения?Как выровнять кнопку с центром с помощью бутстрапа?

примечание: я попытался сделать

<div class="wrapper text-center">

и до сих пор она не будет работать.

Вот скриншот я взял: 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>

тогда ...

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

источник

2017-01-16 mdlz

вы хотите, чтобы кнопка по центру вертикально или горизонтально –

@Naila это уже центрируется по вертикали с помощью 'выравнивают-элементов: центральный;'. Я предполагаю, что они означают центрирование по горизонтали. –

@MichaelCoker Спасибо за информацию –

Добавить justify-content: center; в .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>

источник

2017-01-16 04:18:41

Вы можете просто сделать это с 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>

источник

2017-01-16 04:23:05

Извините, я новичок в бутстрапе. Это сработало, спасибо! – mdlz

@mdlz michael coker ответ был также приятным с flex свойство попробовать, что также –

Как выровнять кнопку с центром с помощью бутстрапа?

ответ

Смежные вопросы