如何在WordPress中居中对齐标题菜单项

时间:2017-04-18 作者:Alt-Rock Ninja

我不小心移动了标题菜单项(screenshot) 到顶部。如何将它们移回中间(默认),如demo website?

1 个回复
SO网友:Johansson

虽然这不是一个与WordPress相关的问题,应该在StackOverflow 相反,要垂直对齐菜单项,您至少有3个选项。假设您的HTML结构如下所示:

<nav>
    <ul>
        <li>
            <a href="#">My FIRST ITEM</a>
        </li>
        <li>
            <a href="#">My SECOND ITEM</a>
        </li>
    </ul>
</nav>
Option 1 将锚点的线高度设置为与其父锚点相同的高度。让我们说你的<nav> 高度为75px。还应将锚点线高度设置为75px:

.nav a {
    line-height:75px;
}
不必这样<nav>. 在这种情况下,它的父级可以是以下任一项:<nav>, <ul><li>.

Option 2 为锚点的父锚点指定一个高度,然后垂直对齐锚点:

.li {
    height:75px;
}
.li a {
    vertical-align:middle;
}
Option 3 给你的锚一些衬垫。设置顶部和底部的填充:

.nav a {
    padding:25px 0;
}
尝试增加/减少填充量,直到锚点位于线的中间。

所有这些都将产生相同的效果。然而,它们在其他属性(如背景颜色)中的行为可能会有所不同。

相关推荐

通过主题定制器编辑style.css

直到现在,在我的Wordpress主题中,我在主题定制器中实现了一些必要的样式选项,这些选项将编辑CSS并通过将CSS输出到头部内部来覆盖它<style> 标记,例如,这里我实现了颜色选择器,如果默认状态发生更改,我会输出样式:function dc_get_gradient_colors() { $first_color = get_theme_mod( \'primary_color_1\' ); if ( $link_color != \'#0