btn没有在中间垂直对齐

Question

我正在尝试将按钮垂直居中，但似乎对我尝试过的操作都无效

将div元素设置为显示：inline-block;以及包含输入元素的label元素，以text-align居中。还尝试将vertical-align：middle应用于div和label。

html

<div class="card">
    <div class="card-header panel-heading">
        <span style="font-size: 18px; font-weight: bold; ">Firm Details</span>
        <div class="pull-right" style="padding-right:10px; display: inline-block;">
            <label style="text-align: center; vertical-align:middle" class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input  
                    type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>

        </div>
    </div>

css

.btn-primary {
  color: #fff;
  background-color: #ee6e0b;
  border-color: #d6630a;
}

.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: #bd5809;
  border-color: #5c2a04;
}

.btn-primary:hover {
  color: #fff;
  background-color: #bd5809;
  border-color: #9b4807;
}

.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #bd5809;
  border-color: #9b4807;
}

.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.open > .btn-primary.dropdown-toggle:hover,
.open > .btn-primary.dropdown-toggle:focus,
.open > .btn-primary.dropdown-toggle.focus {
  color: #fff;
  background-color: #9b4807;
  border-color: #5c2a04;
}

应用flex

没有弹性

Answer 1

您可以在此处尝试以下代码：

您的代码包含一个浮动元素，该元素会影响父级高度，这意味着一个浮动元素不会扩展父级高度，因此，当您将元素floadt右移或左移时，父级会同时使用clear和bootstrap使用clearfix课。

在这里，您可以轻松地在我的代码中使用flexbox来解决问题。

.panel-heading {
  background: orange;
  overflow: hidden;
  /*display:flex;
  align-items: center;
  justify-content: space-between;*/
   padding-top: 5px !important;
    padding-bottom: 5px  !important;
}
.panel-heading .left-label {
  display: inline-block;
  padding-top: 5px;
}
.btn-primary {
  color: #fff;
  background-color: #ee6e0b;
  border-color: #d6630a;
}

.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: #bd5809;
  border-color: #5c2a04;
}

.btn-primary:hover {
  color: #fff;
  background-color: #bd5809;
  border-color: #9b4807;
}

.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #bd5809;
  border-color: #9b4807;
}

.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.open > .btn-primary.dropdown-toggle:hover,
.open > .btn-primary.dropdown-toggle:focus,
.open > .btn-primary.dropdown-toggle.focus {
  color: #fff;
  background-color: #9b4807;
  border-color: #5c2a04;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="card">
    <div class="card-header panel-heading" >
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Firm Details</span>
        <div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
            <label style="text-align: center; vertical-align:middle" class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
            <input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
        </div>
    </div>