Выровняйте две кнопки по вертикали

Question

Я бэкэнд-разработчик, поэтому извините за слабый код, который вы можете найти,

вот так выглядит моя форма:

эти две кнопки неправильно выровнены в Chrome

У меня проблема только в Chrome, FireFox и Edge работают как положено, см. Изображение ниже

Как я хочу, чтобы форма выглядела (снято с FF)

Код формы:

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

немного CSS просто для FF & Edge

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

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

При проверке страницы в Chrome кнопка (Générer), кажется, занимает много места, может быть, именно она вызывает деформацию, см. Изображение ниже

Кнопка Générer

Кнопка Sauvegarder

Answer 1

Просто удалите специфичный для браузера CSS и добавьте следующий 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 -->

Вы также можете проверить эту скрипку https://jsfiddle.net/sy89qh73/

Answer 2

Попробуйте использовать flexbox, чтобы выровнять их. это поможет вертикально и горизонтально.

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

Рабочая скрипка: https://jsfiddle.net/odecLzad/