垂直对齐答案

【问题标题】：Vertically aligning垂直对齐
【发布时间】：2016-03-23 14:38:06
【问题描述】：

如何垂直对齐这个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>

【问题讨论】：

您可以在菜单中添加一些 magin-top，例如使用您的值，nav {margin: 15px 10% 0; }

标签： css alignment

【解决方案1】：

you can resolve your problem using this.

我认为垂直对齐：中间；适合您的问题。

【讨论】：

【解决方案2】：

只需对三个列表项 Home、Events、Contact class="m" 进行一些分类，然后将它们设置为 margin-left margin-right 以相应地垂直对齐它们。

【讨论】：