Css 垂直对齐_Css_Alignment - Fatal编程技术网

Css 垂直对齐

css

Css 垂直对齐,css,alignment,Css,Alignment,如何在该视图中垂直对齐元素 * { 文字装饰：无；填充：0px；边距：0px；列表样式：无； } #主容器{ 背景颜色：灰色； } #校长兼主讲人李宇良{ 显示：内联块； } 导航{ 利润率：0px 10%；填充：10px 0px； } #漂浮物{ 浮动：对； } #漂浮物{ 颜色：深绿色；字体大小：20px；利润率：10px； } #浮子右>李{ 浮动：左； } #皮尔卡拉{ 字体大小：48px；颜色：白色；字体系列：草书； } 我认为垂直对齐：中间对齐；适合您

如何在该视图中垂直对齐元素


* {
文字装饰：无；
填充：0px；边距：0px；
列表样式：无；
} 
#主容器{
背景颜色：灰色；
}
#校长兼主讲人李宇良{
显示：内联块；
}
导航{
利润率：0px 10%；
填充：10px 0px；
}
#漂浮物{
浮动：对；
}
#漂浮物{
颜色：深绿色；
字体大小：20px；
利润率：10px；
}
#浮子右>李{
浮动：左；
}
#皮尔卡拉{
字体大小：48px；
颜色：白色；
字体系列：草书；
}

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

只需对三个列表项Home、Events、Contact

class=“m”

进行分类，然后将它们设置为左边距

右边距，以相应地垂直对齐 您可以在菜单中添加一些magin top，例如使用您的值nav{margin:15px 10%0；}
    <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>