Html 使用CSS向上移动文本

我知道这可能会偏离主题，但我不能在中心对齐测试（垂直对齐）。 这是我的菜单代码：

<nav class="menu">
    <ul class="active">
        <li class="current-item"><a href="#">
            <i class="fa fa-home fa-3x" aria-hidden="true"></i><strong class="fa-home-1x home-text">Home</strong></a></li>           
        <li><a href="#"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i><strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
    </ul>
    <a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>

jQuery（文档）.ready（函数（）{
jQuery（'.toggle nav'）。单击（函数（e）{
jQuery（this.toggleClass（'active'）；
jQuery（'.menu ul'）.toggleClass（'active'）；
e、 预防默认值（）；
});
});
/*----切换按钮-----*/
.切换导航{
显示：无；
}
/*-----菜单-----*/
@媒体屏幕和屏幕（最小宽度：860像素）{
.菜单{
宽度：100%；
填充：10px 0px；
盒影：0px 1px 1px rgba（0,0,0,0.15）；
边界半径：3px；
背景#4CAF50；
}
}
.菜单ul{
显示：内联块；
}
李先生{
保证金：0px 50px 0px 0px；
浮动：左；
列表样式：无；
字号：17px；
}
李：最后一个孩子{
右边距：0px；
}
.菜单a{
文本阴影：0px 1px 0px rgba（0,0,0,0.5）；
颜色：#FFFFFF；
文字装饰：无；
过渡：颜色线性0.15s；
}
.菜单a：悬停，
.菜单.当前项a{
文字装饰：无；
颜色：#FFFFFF；
}
/*-----搜寻-----*/
.查册表格{
浮动：对；
显示：内联块；
}
/*-----响应的-----*/
@媒体屏幕和屏幕（最大宽度：1150px）{
.包裹{
宽度：90%；
}
}
@媒体屏幕和屏幕（最大宽度：860像素）{
.菜单{
宽度：100%；
位置：相对位置；
显示：内联块；
}
.菜单ul.active{
显示：无；
}
.菜单ul{
位置：绝对位置；
最高：90%；
左：0px；
填充：10px 10em 0em 2em；
/*菜单宽度*/
边界半径：7px；
背景#4CAF50；
}
.菜单：之后{
宽度：0px；
高度：0px；
位置：绝对位置；
最高：0%；
左：22px；
内容：''；
转换：翻译（0%，-100%）；
左边框：7px实心透明；
右边框：7px实心透明；
边框底部：7px实心#303030；
}
李先生{
保证金：5px0px 5px0px；
浮动：无；
显示：块；
}
.菜单a{
显示：块；
}
.切换导航{
填充：20px；
/*静噪元素大小*/
浮动：左；
显示：内联块；
盒影：0px 1px 1px rgba（0,0,0,0.15）；
边界半径：4px；
背景#4CAF50；
颜色：#FFFFFF；
字体大小：25px；
过渡：颜色线性0.15s；
字体大小：粗体；
}
.切换导航：悬停，
.toggle-nav.active{
文字装饰：无；
颜色：#FFFFFF；
}
}
.主页文本{
颜色：红色；
填充顶部：30px；
填充底部：30px；
显示：内联块；
垂直对齐：顶部；
}






试试这个。
父类使用
display:table
，子类使用
display:table cell
和
vertical align:middle
。我已经设置了显示内容的高度

演示工程
ulli{
高度：100px；
背景：灰色；
显示：表格；
边框：1px纯白；
宽度：200px；
}
ullia{
显示：表格单元格；
垂直对齐：中间对齐；
}





试试这个。
父类使用
display:table
，子类使用
display:table cell
和
vertical align:middle
。我已经设置了显示内容的高度

演示工程
ulli{
高度：100px；
背景：灰色；
显示：表格；
边框：1px纯白；
宽度：200px；
}
ullia{
显示：表格单元格；
垂直对齐：中间对齐；
}





父元素应将位置属性设置为相对，然后将内部元素位置设置为绝对，将顶部、底部、左侧和右侧属性设置为0

因此，在你的情况下：

.current-item {
    position: relative
}

.home-text{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

父元素应将位置属性设置为相对，然后将内部元素位置设置为绝对，并将顶部、底部、左侧和右侧属性设置为0

因此，在你的情况下：

.current-item {
    position: relative
}

.home-text{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}


.home text、.sign out text{
显示：内联块；
垫底：25px；
垂直对齐：中间对齐；
左侧填充：10px；
}






.home text、.sign out text{
显示：内联块；
垫底：25px；
垂直对齐：中间对齐；
左侧填充：10px；
}





试试这个，设置
内联块
和
垂直对齐：中间至
.fa


.menu li.fa{
显示：内联块；
垂直对齐：中间对齐；
}





试试这个，设置
内联块
和
垂直对齐：中间至
.fa


.menu li.fa{
显示：内联块；
垂直对齐：中间对齐；
}





只需将
垂直对齐：中间
添加到
li
，就像这样，它就可以正常工作了

.menu li * {
  vertical-align: middle;
}

示例代码段


.menu li{
列表样式类型：无；
}
.菜单李*{
垂直对齐：中间对齐；
}





只需将
垂直对齐：中间
添加到
li
，就像这样，它就可以正常工作了

.menu li * {
  vertical-align: middle;
}

示例代码段


.menu li{
列表样式类型：无；
}
.菜单李*{
垂直对齐：中间对齐；
}