为什么这个按钮没有居中？

huangapple
go评论66阅读模式
英文:

Why this button is not getting center?

问题

<button type='button' className="mx-auto btn btn-danger btn-block text-center">Login</button>
英文:

I am using bootstrap V5 and i wanted to center the login button in the div and i am using mx-auto and also tried text-center but none of this is working.
Where am i getting wrong.

 &lt;div className=&#39;container my-auto w-50&#39; style={{backgroundColor:&quot;#E8D2A6&quot;}}&gt;
   &lt;div className=&quot;text-center my-4&quot; style={{fontSize:&quot;2.5rem&quot;}}&gt;Login&lt;/div&gt;
   &lt;div className=&quot;form-group row&quot;&gt;
   &lt;label htmlFor=&#39;userid&#39; className=&#39;col-3 col-form-label&#39; style={{fontSize:&quot;1.3rem&quot;}}&gt;Enter UserId:&lt;/label&gt;
   &lt;div class=&quot;col-8&quot;&gt;
   &lt;input type=&quot;text&quot; id=&quot;userid&quot; className=&#39;form-control&#39; placeholder=&#39;Enter user id&#39;/&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div className=&quot;form-group row my-3&quot;&gt;
   &lt;label htmlFor=&#39;userid&#39; className=&#39;col-3 col-form-label&#39; style={{fontSize:&quot;1.3rem&quot;}}&gt;Enter Password:&lt;/label&gt;
   &lt;div class=&quot;col-8&quot;&gt;
   &lt;input type=&quot;text&quot; id=&quot;userid&quot; className=&#39;form-control&#39; placeholder=&#39;Enter Password&#39;/&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;button type=&#39;button&#39; className=&quot;mx-auto btn btn-danger btn-block text-center&quot;&gt;Login&lt;/button&gt;
   
&lt;/div&gt;

答案1

得分: 1

试试这个：

&lt;!-- begin snippet: js hide: false console: true babel: null --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot;/&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;


     &lt;div class=&#39;container my-auto w-50&#39; style={{background-color:&quot;#E8D2A6&quot;}}&gt;
       &lt;div class=&quot;text-center my-4&quot; style={{fontSize:&quot;2.5rem&quot;}}&gt;登录&lt;/div&gt;
       &lt;div class=&quot;form-group row&quot;&gt;
       &lt;label htmlFor=&#39;userid&#39; class=&#39;col-3 col-form-label&#39; style={{fontSize:&quot;1.3rem&quot;}}&gt;输入用户ID：&lt;/label&gt;
       &lt;div class=&quot;col-8&quot;&gt;
       &lt;input type=&quot;text&quot; id=&quot;userid&quot; class=&#39;form-control&#39; placeholder=&#39;输入用户ID&#39;/&gt;
       &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;form-group row my-3&quot;&gt;
       &lt;label htmlFor=&#39;userid&#39; class=&#39;col-3 col-form-label&#39; style={{fontSize:&quot;1.3rem&quot;}}&gt;输入密码：&lt;/label&gt;
       &lt;div class=&quot;col-8&quot;&gt;
       &lt;input type=&quot;text&quot; id=&quot;userid&quot; class=&#39;form-control&#39; placeholder=&#39;输入密码&#39;/&gt;
       &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;form-group row&quot;&gt;
         &lt;button type=&#39;button&#39; class=&quot;w-auto mx-auto btn btn-danger btn-block text-center&quot;&gt;登录&lt;/button&gt;
       &lt;/div&gt;
       
    &lt;/div&gt;

&lt;!-- end snippet --&gt;
英文:

Try this:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;


 &lt;div class=&#39;container my-auto w-50&#39; style={{background-color:&quot;#E8D2A6&quot;}}&gt;
   &lt;div class=&quot;text-center my-4&quot; style={{fontSize:&quot;2.5rem&quot;}}&gt;Login&lt;/div&gt;
   &lt;div class=&quot;form-group row&quot;&gt;
   &lt;label htmlFor=&#39;userid&#39; class=&#39;col-3 col-form-label&#39; style={{fontSize:&quot;1.3rem&quot;}}&gt;Enter UserId:&lt;/label&gt;
   &lt;div class=&quot;col-8&quot;&gt;
   &lt;input type=&quot;text&quot; id=&quot;userid&quot; class=&#39;form-control&#39; placeholder=&#39;Enter user id&#39;/&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;form-group row my-3&quot;&gt;
   &lt;label htmlFor=&#39;userid&#39; class=&#39;col-3 col-form-label&#39; style={{fontSize:&quot;1.3rem&quot;}}&gt;Enter Password:&lt;/label&gt;
   &lt;div class=&quot;col-8&quot;&gt;
   &lt;input type=&quot;text&quot; id=&quot;userid&quot; class=&#39;form-control&#39; placeholder=&#39;Enter Password&#39;/&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;form-group row&quot;&gt;
     &lt;button type=&#39;button&#39; class=&quot;w-auto mx-auto btn btn-danger btn-block text-center&quot;&gt;Login&lt;/button&gt;
   &lt;/div&gt;
   
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月18日 18:27:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/75492694.html
  • bootstrap-5
  • css
  • html
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定