css - 垂直对齐 - 导航栏中的 float 元素

Question

我试图在导航栏中垂直对齐左右两个 float 元素。 (“折叠的”导航栏应用了 clearfix hack)。导航栏的高度由左侧 float 的标题决定(默认为 h2，2em)。然而，正确的 float 元素，一个带有输入和按钮的表单，即使在尝试垂直居中元素的转换方法时也不会居中？如果我取消注释转换垂直对齐方法，它只会将表格进一步向上发送(而不是向下和居中)。

代码笔( https://codepen.io/yunti/pen/xdvpQK )

https://codepen.io/yunti/pen/xdvpQK

.header {
  background-color: darkorange;
}

.header-title {
  float: left;
  padding-left: 10px;
  color: white;
  font-weight: 400;
}

.form-header {
  float: right;
  padding-right: 10px;
  /*position: relative;*/
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

input,
button {
  vertical-align: middle;
}

.form-control {
  margin: 10px;
  height: 34px;
  width: 180px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 18px;
  color: #555;
}

.form-control::placeholder {
  color: grey;
}

.btn {
  margin-left: 10px;
  height: 34px;
  padding-left: 12px;
  padding-right: 12px;
  line-height: 1.42857143;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: forestgreen;
  font-size: 14px;
  font-weight: 400;
  color: white;
  cursor: pointer;
}

<div class="header clearfix">
  <h1 class="header-title">Weather App</h1>
  <div class="form-header">
    <form class="form-group">
      <input class="form-control" type="text" placeholder="St. George, Utah" />
      <button class="btn">Get Weather</button>
    </form>
  </div>
</div>

Answer 1

Flexbox 使这变得非常简单。只需添加 display: flex;证明内容:空格之间； align-items: center; 到父级，这将分隔父级中的元素并垂直对齐它们。

.header {
  background-color: darkorange;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  padding-left: 10px;
  color: white;
  font-weight: 400;
}

.form-header {
  padding-right: 10px;
}


.form-control {
  margin: 10px;
  height: 34px;
  width: 180px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 18px;
  color: #555;
}

.form-control::placeholder {
  color: grey;
}

.btn {
  margin-left: 10px;
  height: 34px;
  padding-left: 12px;
  padding-right: 12px;

  line-height: 1.42857143;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: forestgreen;
  font-size: 14px;
  font-weight: 400;
  color: white;
  cursor: pointer;
}

<div class="header">
  <h1 class="header-title">Weather App</h1>
  <div class="form-header">
    <form class="form-group">
      <input class="form-control" type="text" placeholder="St. George, Utah" />
      <button class="btn">Get Weather</button>
    </form>
  </div>
</div>

或者如果你不想使用 flexbox，你可以在父级上使用 display: table，在子级上使用 display: table-cell 结合 垂直对齐:中间

.header {
  background-color: darkorange;
  display: table;
  width: 100%;
  
}

.header-title {
  padding-left: 10px;
  color: white;
  font-weight: 400;
}

.header-title, .form-header {
  vertical-align: middle;
  display: table-cell;
}

.form-header {
  padding-right: 10px;
  text-align: right;
}

.form-control {
  margin: 10px;
  height: 34px;
  width: 180px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 18px;
  color: #555;
  vertical-align: middle;
}

.form-control::placeholder {
  color: grey;
}

.btn {
  margin-left: 10px;
  height: 34px;
  padding-left: 12px;
  padding-right: 12px;

  line-height: 1.42857143;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: forestgreen;
  font-size: 14px;
  font-weight: 400;
  color: white;
  cursor: pointer;
  vertical-align: middle;
}

<div class="header">
  <h1 class="header-title">Weather App</h1>
  <div class="form-header">
    <form class="form-group">
      <input class="form-control" type="text" placeholder="St. George, Utah" />
      <button class="btn">Get Weather</button>
    </form>
  </div>
</div>