How center two elements vertically in a navbar with different heights? - css

Question

I am trying to center my logo and a button in a navbar but without success, i already try use vertical-align, position absolute, padding in both, display table, table cell, etc... but anything works!
I can't use CSS3 unfortunately :[.
https://jsfiddle.net/cn23acef/1/embedded/result/
HTML:
<header class="header">
<div class="container">
<div class="header__logo">
<img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25" />
</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

See this code
.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">
<img src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25" />
</div>
<div class="header__cta">
<a href="#" class="cta">
Reserve <span class="wide__up">seu ingresso</span>
</a>
</div>
</div>
</header>

Answer 2

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

Answer 3

If I am understanding you correctly. When you say center my logo you mean vertically correct?
Like this?
In order to do this all you need to do is paste this code in place of your current img tag.
<img style="margin: 7px 0px 0px;" src="https://pc-celicoo1.c9.io/little-stuffs/client/public/images/main/logos/pubcrawl2.png" height="25">
To vertically adjust all you have to do is play with the margin 7px.
If this does not solve the issue please be more specific and if it is what you were looking for please accept it as the correct answer.
Hope This Helps!