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

时间：2015-03-03 04:24:50

标签： html css html5 internet-explorer

我试图将我的徽标和一个按钮放在导航栏中，但没有成功，我已经尝试使用vertical-align，绝对位置，填充，显示表，表格单元格等等......但是任何工作都有效！ / p>

不幸的是我无法使用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;
}

3 个答案:

答案 0 :(得分：0)

查看此代码

＆＃13;
＆＃13; 
.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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

＆＃13;
＆＃13; 
.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;
  text-align:right;
  width:50%;
}
.header__cta {
  float: left;
}
.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__cta a {
    display: inline-block;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

如果我理解正确的话。当你说中心我的标志你的意思是垂直正确吗？

喜欢这个？ enter image description here

为了做到这一点，您只需要粘贴此代码代替当前的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。

如果这不能解决问题，请更具体，如果您正在寻找，请将其作为正确答案接受。

希望这有帮助！

相关问题
最新问题