垂直對齊

-1

如何垂直對齊picture中的元素？垂直對齊

<html lang="en-us"> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <style type="text/css"> 
    * { 
    text-decoration: none; 
    padding: 0px; margin: 0px; 
    list-style: none; 
    } 
    #headercontainer { 
    background-color:gray; 
    } 
    #headercontainer ul li { 
     display: inline-block; 
    } 
    nav { 
    margin: 0px 10%; 
    padding: 10px 0px; 
    } 
    #floatedright { 
    float: right; 
    } 
    #floatedright a { 
    color: darkgreen; 
    font-size: 20px; 
    margin: 10px; 
    } 
    #floatedright > li { 
    float: left; 
    } 
    #piercarla { 
    font-size: 48px; 
    color: white; 
    font-family: cursive; 
    } 
    </style> 
    <body> 
    <section id="headercontainer"> 
     <nav> 
     <ul> 
      <li><a href="#" id="Piercarla">Piercarla</a></li> 
      <section id="floatedright"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Events</a></li> 
       <li><a href="#">Contact</a></li> 
      </section> 
     </ul> 
     </nav> 
    </section>

來源

2016-03-23 Oliver Ullman

您可以在菜單中添加一些magin-top，例如您的值爲nav {margin：15px 10％0; } – AlejandroVega