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

应用 flex

没有 flex

Answer 1

您可以在此处尝试此代码:

您的代码包含一个 float 元素，该元素对父元素的高度有影响，这意味着 float 元素不会扩展父元素的高度，因此，当您给元素 floadt right 或 left 时，父元素使用 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>