Question

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

Answer 1

you can resolve your problem using this.

我认为vertical-align：middle;适合您的问题。

Answer 2

只需将一些课程分配给主页，活动，联系人class="m"这三个列表项，然后设置它们的样式，以便margin-left margin-right相应地垂直对齐它们。

垂直对齐

2 个答案: