在菜單欄中居中p元素和div

Question

嘗試垂直居中p元素和圖像。我知道我可以調整邊距和填充，但是我想確保元素對齊，無論用戶進入網站的設備是什麼。因此我正在尋找另一種選擇。

html, body { 
 
\t font-size: 100%; 
 
\t height: 100%; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-weight: 200; 
 
} 
 
/*Menu*/ 
 
.menu { 
 
\t height: auto; 
 
\t background-color: #fff; 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t z-index: 1; 
 
\t -moz-box-shadow: 0 2px 0 0 #6ed3cf; 
 
\t -webkit-box-shadow: 0 2px 0 0 #6ed3cf; 
 
\t box-shadow: 0 2px 0 0 #6ed3cf; 
 
} 
 
.menu .logo { 
 
\t padding-left: 2em; 
 
} 
 
.menu ul li a { 
 
\t color: #3b3a36; 
 
} 
 
.menu .dropdown { 
 
\t float: right; 
 
\t right: 2em; 
 
\t z-index: 20; 
 
} 
 
.menu .dropdown-menu { 
 
\t background: #fff; 
 
\t border: none; 
 
} 
 
.dropdown img { 
 
\t height: 2.8em; 
 
\t width: 2.8em; 
 
\t -webkit-transition: width .8s, height .8s, -webkit-transform .8s; /* Safari */ 
 
\t transition: width .8s, height .8s, transform .8s; 
 
} 
 
.dropdown ul { 
 
\t top: 3em; 
 
\t left: -6.5em; 
 
\t width: auto; 
 
\t position: absolute; 
 
\t color: #3DD0AC; 
 
} 
 
.rotate { 
 
\t -webkit-transform: rotate(180deg); /* Safari */ 
 
\t transform: rotate(180deg); 
 
} 
 
.logo p { 
 
\t font-size: 100%; 
 
\t color: black; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-weight: bolder; 
 
\t letter-spacing: 0.5em; 
 
\t margin: 0; 
 
}

<div class="menu"> 
 
    <div class="logo"> 
 
    <p>&lt;&frasl;BY&#95;John Doe&gt;</p> 
 
    </div> 
 
    <div class="dropdown"> <img src="img/menu.jpg"> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">Find me on Linkedin</a> 
 
     <li> 
 
     <li><a href="#">Send me an email</a></li> 
 
     <li><a href="/docs/Resume.pdf" download="Resume">Download my resume</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

的Flex盒可以爲你達致這。爲實現Flexbox

display:flex; 
    justify-content:space-between; 
    align-items: center 

更多設置在這裏：只需添加到您的CSS .menuhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, 
 
body { 
 
    font-size: 100%; 
 
    height: 100%; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 200; 
 
} 
 

 

 
/*Menu*/ 
 

 
.menu { 
 
    height: auto; 
 
    background-color: #fff; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    -moz-box-shadow: 0 2px 0 0 #6ed3cf; 
 
    -webkit-box-shadow: 0 2px 0 0 #6ed3cf; 
 
    box-shadow: 0 2px 0 0 #6ed3cf; 
 
    display:flex; 
 
    justify-content:space-between; 
 
    align-items: center 
 
    } 
 

 
.menu .logo { 
 
    padding-left: 2em; 
 
} 
 

 
.menu ul li a { 
 
    color: #3b3a36; 
 
} 
 

 
.menu .dropdown { 
 
    float: right; 
 
    right: 2em; 
 
    z-index: 20; 
 
} 
 

 
.menu .dropdown-menu { 
 
    background: #fff; 
 
    border: none; 
 
} 
 

 
.dropdown img { 
 
    height: 2.8em; 
 
    width: 2.8em; 
 
    -webkit-transition: width .8s, height .8s, -webkit-transform .8s; 
 
    /* Safari */ 
 
    transition: width .8s, height .8s, transform .8s; 
 
} 
 

 
.dropdown ul { 
 
    top: 3em; 
 
    left: -6.5em; 
 
    width: auto; 
 
    position: absolute; 
 
    color: #3DD0AC; 
 
} 
 

 
.rotate { 
 
    -webkit-transform: rotate(180deg); 
 
    /* Safari */ 
 
    transform: rotate(180deg); 
 
} 
 

 
.logo p { 
 
    font-size: 100%; 
 
    color: black; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: bolder; 
 
    letter-spacing: 0.5em; 
 
    margin: 0; 
 
}

<div class="menu"> 
 
    <div class="logo"> 
 
    <p>&lt;&frasl;BY&#95;John Doe&gt;</p> 
 
    </div> 
 
    <div class="dropdown"> 
 
    <img src="img/menu.jpg"> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">Find me on Linkedin</a> 
 
     <li> 
 
      <li><a href="#">Send me an email</a></li> 
 
      <li><a href="/docs/Resume.pdf" download="Resume">Download my resume</a></li> 
 
    </ul> 
 
    </div> 
 
</div>