btn 没有在中间垂直对齐

Question

我正在尝试将按钮垂直居中，但我尝试过的任何方法似乎都没有效果

设置要显示的 div 元素：inline-block;以及包含文本对齐输入元素的标签元素：中心。还尝试将 vertical-align:middle 应用于 div 和标签。

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

应用弹性

没有弹性

Answer 1

你可以在这里试试这个代码：

您的代码包含一个浮动元素，该元素对父高度的影响，这意味着浮动元素不会扩展父高度，因此，当您将元素 floadt 向右或向左时，父级使用 clear both 或 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>