的 JSFIDDLE

Question

我正在创建一个响应式标头。我有两列，希望右列中的top: 50%; margin-top: -xy px垂直居中。

我知道我可以使用button来中心项目，而我的height: 40px.虽然有一个固定的button

要使用此方法，我将div {position: relative}包裹在div内。这不起作用，因为SingleOrDefaultAsync没有伸展自己的高度。

我如何用css解决这个问题？首先我考虑了Flexbox，但它有一些lack of browser compatibility。

JSFIDDLE DEMO

Answer 1

使用position: relative删除此div并将position: relative添加到header标记。您甚至可以删除column-right div。

另一种解决方案：

header button {
  top: 50%;
  transform: translateY(-50%); // instead of negative margin-top (it is useful when your button has dynamic height, supports IE9+ with -ms- prefix)
}

的 JSFIDDLE

Answer 2

您可以大大简化代码 - 删除浮点数，（改为使用display: inline-block），删除.relative div等。

Working Fiddle

html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
header {
  background: red;
  color: #fff;
  padding: 0.5em;
}
header h1 {
  font-size: 2em;
  margin: 0 0 0.2em;
}
header p {
  margin: 0;
}
header button {
  height: 40px;
  width: 70px;
}
.column-left {
  display:inline-block;
  width: 70%;
  vertical-align: middle;
}
.column-right {
  width: 29%;
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/* responsive */
@media (min-width: 200px) {
  header {
    padding: 1em;
  }
}
@media (min-width: 300px) {
  header {
    padding: 1.5em;
  }
}
@media (min-width: 400px) {
  header {
    padding: 2em;
  }
}
@media (min-width: 500px) {
  header {
    padding: 2.5em;
  }
}
@media (min-width: 600px) {
  header {
    padding: 3em;
  }
}
/* helpers */
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

如何将标题垂直居中？

2 个答案:

的 JSFIDDLE