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

我正在尝试将我的徽标和导航栏中的按钮居中，但没有成功，我已经尝试使用垂直对齐、绝对位置、填充、显示表、表格单元格等。。。但什么都行

很遗憾，我不能使用CSS3:[

HTML:

请参阅此代码

.集装箱{ 左：2%； 右：2%； 左边距：自动； 右边距：自动； 身高：100%； } @仅介质屏幕和最小宽度：620px{ .集装箱{ 左：1.8%； 右翼：1.8%； 最大宽度：688px； } } @仅介质屏幕和最小宽度：800px{ .集装箱{ 左：1.4%； 右侧填充：1.4%； 最大宽度：1180px； } } 身体{ 背景：黑色； 保证金：0自动； } .标题{ 背景：fff； 位置：固定； z指数：99999； 宽度：100%； /*-网络工具包盒阴影：0 1px 4px rgba0,0,0,0.15*/ /*-莫兹盒阴影：0 1px 4px rgba0,0,0,0.15*/ /*盒影：0 1px4pRGBA0,0,0,0.15*/ } .header__标志{ 浮动：左； } .header\uu cta{ 浮动：对； } .cta{ 显示：块； 背景：52C0C2； 颜色：fff； 字体系列：Oswald、Helvetica、无衬线； 字体大小：400； 填充：735雷姆1.25雷姆； 边界半径：3px； 盒影：02px5px0rgba0,0,0,16,02px10px0rgba0,0,0,12； } .cta[class^=i-]， .cta大[class^=i-]{ 右边距：1rem； } @介质最大宽度：767px{ .header__标志{ 浮动：无； 文本对齐：居中； } .header\uu cta{ 浮动：无； 文本对齐：居中； } .标题a{ 显示：内联块； } } .集装箱{ 左：2%； 右：2%； 左边距：自动； 右边距：自动； 身高：100%； } @仅介质屏幕和最小宽度：620px{ .集装箱{ 左：1.8%； 右翼：1.8%； 最大宽度：688px； } } @仅介质屏幕和最小宽度：800px{ .集装箱{ 左：1.4%； 右侧填充：1.4%； 最大宽度：1180px； } } 身体{ 背景：黑色； 保证金：0自动； } .标题{ 背景：fff； 位置：固定； z指数：99999； 宽度：100%； /*-网络工具包盒阴影：0 1px 4px rgba0,0,0,0.15*/ /*-莫兹盒阴影：0 1px 4px rgba0,0,0,0.15*/ /*盒影：0 1px4pRGBA0,0,0,0.15*/ } .header__标志{ 浮动：左； 文本对齐：右对齐； 宽度：50%； } .header\uu cta{ 浮动：左； } .cta{ 显示：块； 背景：52C0C2； 颜色：fff； 字体系列：Oswald、Helvetica、无衬线； 字体大小：400； 填充：735雷姆1.25雷姆； 边界半径：3px； 盒影：02px5px0rgba0,0,0,16,02px10px0rgba0,0,0,12； } .cta[class^=i-]， .cta大[class^=i-]{ 右边距：1rem； } @介质最大宽度：767px{ .标题a{ 显示：内联块； } }

---

如果我理解正确。当你说我的标志居中时，你的意思是垂直正确吗

像这样

为了做到这一点，您需要做的就是将此代码粘贴到当前img标记的位置

<img style="margin: 7px 0px 0px;" src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25">

要垂直调整，您所要做的就是播放边距7px

如果这不能解决问题，请更加具体，如果这是您所寻找的，请接受它作为正确答案

---

希望这有帮助！

@DRX您有机会测试一下吗？？

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

<img style="margin: 7px 0px 0px;" src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25">