垂直对齐 - 导航栏中的浮动元素

Question

我试图在导航栏中垂直对齐左右两个浮动元素。 （＆＃39;折叠＆＃39;导航栏已应用了clearfix hack）。导航栏的高度由左浮动标题确定（默认为h2,2em）。然而，即使在尝试使用变换方法垂直居中项目时，右侧浮动元素（带有输入和按钮的形式）也不会集中在一起？ 如果我取消注释变换垂直对齐方法，它只是向上发送形式（不向下和居中）。

CodePen（https://codepen.io/yunti/pen/xdvpQK）

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

Flexbox让这很容易。只需将display: flex; justify-content: space-between; 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，则可以在父级{0}上使用display: table display: table-cell，并vertical-align: middle

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

Answer 2

你的H1元素（“天气应用程序” - 22px）和你的输入/按钮（10px）有不同的余量。在所有这些元素上使你的margin-top相同。