how to bring button in center in html code example

Example 1: html center button

button{
    /*Change the width as much as you like, but make sure 
    margin-left and margin-right + width = 100%*/
    width:50%;
    margin-left:25%;
    margin-right:25%;
}

Example 2: bootstrap button center

<div class="container my-4">

        <p class="font-weight-bold">You can align the button to the center by simply adding alignment class to the parent div. See the examples.</p>
    
        <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/utilities/horizontal-align/"
              target="_blank">Bootstrap Horizontal alignment Docs</a> </p>
    
        <hr>
    
        <p class="font-weight-bold">Basic example</p>
      
       <p>Add class <code>.text-center</code> to the parent div to align <strong>any item</strong> inside to the center.</p>
        
        <div class="border border-light p-3 mb-4">
        
          <div class="text-center">
            <button type="button" class="btn btn-primary">Centered button</button>
          </div>
        
        </div>
    
      </div>

Example 3: html center button

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Button align center</title>

      <style>
         .flex-parent {
            display: flex;
         }

         .jc-center {
            justify-content: center;
         }

         button.margin-right {
            margin-right: 20px;
         }
      </style>
   </head>
   <body>
      <div class="flex-parent jc-center">
         <button type="submit" class="green margin-right">Confirm</button>
         <button type="submit" class="magenta">Cancel</button>
      </div>
   </body>
</html>

Tags:

Css Example

Recent Posts