Align two buttons vertically

Question

I am a backend developer so please excuse the weak code you might find,

this is how my form looks like :

these two buttons are not correctly aligned in Chrome

I am having this issue only in Chrome , FireFox & Edge are working as expected see image below

How i want the form to look like ( shot from FF )

the Form Code :

<div style="margin-top: 20px;margin-left: 100px;">
        <div class="card card-outlined style-primary-dark" style="width: 80%">
            <div class="card-head">
                <header><i class="fa fa-fw fa-lock"></i> QR Code</header>
            </div><!--end .card-head -->
            <div class="card-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="txtData" style="color:#0d998f;" class="col-sm-2 control-label">Texte à Crypté</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="txtData" placeholder="Saisir vos données...." required>
                        </div><br><br><br>
                        <div class="col-sm-10 navigator">
                            <button id="btGenerer" type="button" class="btn ink-reaction btn-primary">Générer</button>
                            <button id="btSaveQR" type="button" class="btn ink-reaction btn-default-dark">Sauvegarder</button>
                        </div>

                    </div>

                </form>
            </div><!--end .card-body -->
        </div><!--end .card -->
    </div><!--end .col -->

some CSS simply for FF & Edge

@-moz-document url-prefix()
    {
        .navigator {
            margin-left:37%;
        }
    }

    @supports (-ms-ime-align: auto) {
        .navigator {
            margin-left:37%;
        }
    }

When Inspecting the page on Chrome the ( Générer ) button seems to take a lot of space maybe it is what's causing the deformity , see image below

Générer Button

Sauvegarder Button

Answer 1

Just remove the browser specific CSS and add the following CSS:

.navigator{
  text-align: center;
}
.navigator button{
  display: inline-block;
  padding: 8px 15px;
  border: 0;
  box-shadow: none;
  outline: none;
  background: #20252b;
  color: #fff;
  cursor: pointer;
}
button#btGenerer{
  background: #0aa89e;
}

<div style="margin-top: 20px;margin-left: 100px;">
        <div class="card card-outlined style-primary-dark" style="width: 80%">
            <div class="card-head">
                <header><i class="fa fa-fw fa-lock"></i> QR Code</header>
            </div><!--end .card-head -->
            <div class="card-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="txtData" style="color:#0d998f;" class="col-sm-2 control-label">Texte à Crypté</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="txtData" placeholder="Saisir vos données...." required>
                        </div><br><br><br>
                        <div class="col-sm-10 navigator">
                            <button id="btGenerer" type="button" class="btn ink-reaction btn-primary">Générer</button>
                            <button id="btSaveQR" type="button" class="btn ink-reaction btn-default-dark">Sauvegarder</button>
                        </div>

                    </div>

                </form>
            </div><!--end .card-body -->
        </div><!--end .card -->
    </div><!--end .col -->

You can also check this fiddle https://jsfiddle.net/sy89qh73/

Answer 2

Try using flexbox to align them. this will help vertically and horizontally.

.navigator{
  display:flex; 
  align-items:center; 
  justify-content:center;
}

Working fiddle: https://jsfiddle.net/odecLzad/