htmlcss-实现导航栏-文字居中

28次阅读

共计 529 个字符,预计需要花费 2 分钟才能阅读完成。

效果


文字水平垂直居中

html 代码

<header>
        <div class="header-container">
            <div class="header-nav">
                <ul>
                    <li><a href="#"> 首页 </a></li>
                    <li><a href="#"> 集团介绍 </a></li>
                    <li><a href="#"> 专家联盟 </a></li>
                    <li><a href="#"> 合作机构 </a></li>
                    <li><a href="#"> 新闻动态 </a></li>
                </ul>
            </div>
        </div>
    </header>

css 代码

header .header-nav {height: 100px;}
header .header-nav ul {
    width: 100%;
    height: 100px;
    border: 1px solid #000;
}
    
header .header-nav ul li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

header .header-nav ul li a {
    display: block;
    padding: 0 30px;
    line-height: 100px;
    font-size: 20px;
}

正文完
 0