css - 如何在不同高度的导航栏中垂直居中两个元素？

Question

我试图将我的 Logo 和一个按钮置于导航栏的中心，但没有成功，我已经尝试使用垂直对齐、绝对位置、在两者中填充、显示表格、表格单元格等......但一切正常!

不幸的是我不能使用 CSS3 :[.

https://jsfiddle.net/cn23acef/1/embedded/result/

HTML:

  <header class="header">
    <div class="container">
      <div class="header__logo">
        <a href=""><img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25"  /></a>
      </div>
      <div class="header__cta">
        <a href="#" class="cta">
          Reserve <span class="wide__up">seu ingresso</span>
        </a>
      </div>
    </div>
  </header>

CSS:

.container {
  padding-left: 2%;
  padding-right: 2%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
@media only screen and (min-width: 620px) {
  .container {
    padding-left: 1.8%;
    padding-right: 1.8%;
    max-width: 688px;
  }
}
@media only screen and (min-width: 800px) {
  .container {
    padding-left: 1.4%;
    padding-right: 1.4%;
    max-width: 1180px;
  }
}

body {
    background: black;
    margin: 0 auto;
}

.header {
  background: #fff;
  position: fixed;
  z-index: 99999;
  width: 100%;
  /* -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
  /* -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
}
.header__logo {
  float: left;
}
.header__cta {
  float: right;
}

.cta {
  display: block;
  background: #52C0C2;
  color: #fff;
  font-family: Oswald, Helvetica, sans-serif;
  font-weight: 400;
  padding: .735rem 1.25rem;
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.cta [class^=i-],
.cta--big [class^=i-] {
  margin-right: 1rem;
}

Answer 1

查看这段代码

.container {
  padding-left: 2%;
  padding-right: 2%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
@media only screen and (min-width: 620px) {
  .container {
    padding-left: 1.8%;
    padding-right: 1.8%;
    max-width: 688px;
  }
}
@media only screen and (min-width: 800px) {
  .container {
    padding-left: 1.4%;
    padding-right: 1.4%;
    max-width: 1180px;
  }
}

body {
    background: black;
    margin: 0 auto;
}

.header {
  background: #fff;
  position: fixed;
  z-index: 99999;
  width: 100%;
  /* -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
  /* -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
  /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
}
.header__logo {
  float: left;
}
.header__cta {
  float: right;
}

.cta {
  display: block;
  background: #52C0C2;
  color: #fff;
  font-family: Oswald, Helvetica, sans-serif;
  font-weight: 400;
  padding: .735rem 1.25rem;
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.cta [class^=i-],
.cta--big [class^=i-] {
  margin-right: 1rem;
}
@media (max-width: 767px){
.header__logo {
  float: none;
  text-align: center;
}
.header__cta {
  float: none;
  text-align: center;
}
  .header__cta a{
    display: inline-block;
  }
}

<header class="header">
    <div class="container">
      <div class="header__logo">
        <a href=""><img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25"  /></a>
      </div>
      <div class="header__cta">
        <a href="#" class="cta">
          Reserve <span class="wide__up">seu ingresso</span>
        </a>
      </div>
    </div>
  </header>