文本居中对齐line-height:等于盒子高度实现居中和 text-align: center+ padding-top: 17px实现居中

最新推荐文章于 2022-05-02 12:14:54 发布

原创最新推荐文章于 2022-05-02 12:14:54 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html

HTML/CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍两种使导航栏及其文字在页面上水平及垂直居中的方法。通过使用CSS的text-align和padding-top属性，或者利用行高(line-height)特性，实现导航栏的美观布局。文章详细解释了每种方法的实现步骤，并对比了它们之间的差异。

效果图

1、导航栏整体要水平居中，且文字要不仅要水平居中，而且需要垂直居中。背景图和为橙色的图，当鼠标经过时，背景图片变为蓝色的背景图
在这里插入图片描述
2、实现方法一：
html代码部分

<div class="father">
        <div class="nav">
            <a href="#">首页</a>
            <a href="#">文档</a>
            <a href="#">案例</a>
            <a href="#">开始</a>
            <a href="#">关于我们</a>
        </div>
    </div>

CSS 代码部分：

    <style>
        .father{
            background-color: palegreen;
            height: 1000px;
        }
        .nav{
            text-align: center;   /*让这个导航栏居中*/
        }
        .nav a {
            width: 120px;  /* 背景图片的高度和宽度分别是120 和 50 */
            height: 33px;
            text-decoration: none;                  /*取消a链接的下划线*/ 
            background-image: url(../img/bg.png);   /*添加背景图片  不平铺*/
            display:inline-block;    /*显示形式为行内块元素*/
            text-align: center;    /*文字水平居中*/
            padding-top: 17px;  /*垂直居中*/
        }
        .nav a:hover {
            background-image: url(../img/bgc.png);  /*鼠标事件*/
        }
    </style>

2、实现方法二：
CSS代码部分

 <style>
        .father{
            background-color: palegreen;
            height: 1000px;
        }
        .nav{
            text-align: center;   /*让这个导航栏居中*/
        }
        .nav a {
            width: 120px;  /* 背景图片的高度和宽度分别是120 和 50 */
            height: 50px;
            text-decoration: none;                  /*取消a链接的下划线*/ 
            background-image: url(../img/bg.png);   /*添加背景图片  不平铺*/
            display:inline-block;    /*显示形式为行内块元素*/
           line-height: 50px;   /*行高等于盒子的高度，可以实现单行文本垂直居中 */
        }
        .nav a:hover {
            background-image: url(../img/bgc.png);
        }
    </style>

2、两种方法的分析比较：
不相同的地方：
- 就是在字体居中的时候
- 方法一：
- 是先让字体水平居中：text-align: center;
- 然后让字体垂直居中： padding-top: 17px;
- 但是这个样子会撑大盒子的大小所以要设置 li的高度： height: 34px; 34px+34px+16px(字体大小) = 50px
- 方法二
- 利用行内块元素的特点
- 行高等于盒子的高度，可以实现单行文本垂直居中
- 这样就不用调整 li 的高度