如何在导航栏中垂直居中放置文本?

编码器

HTML:

<body>
    <div class = "container">
        <div class = "nav">
            <ul class = "pull-left">
                <li><a class = "brand" href = "/">New York Guide</a></li>
            </ul>

            <ul class = "pull-right">
                <li><a href = "#">Sign Up</a></li>
                <li><a href = "#">Log In</a></li>
                <li><a href = "#">Help</a></li>
            </ul>       
        </div>
    </div>
</body> 

CSS:

.nav li {
    display: inline;
}

.nav a {
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.nav {
    background-color: #7f7f7f;
}

目前,我的导航栏文本靠近灰色栏顶部。有什么办法可以使其在酒吧中垂直居中吗?

我需要使用填充或边距标签吗?还是完全其他?

独立乐

您的UL元素具有由引导程序生成的附加的margin-bottom属性。定位您的UL,并将余量重置为0。

.nav ul{margin:0;}

另外,将您的链接的填充固定为相等,并使它们显示为行内块:

.nav a {padding: 10px 10px; display:inline-block;}

工作实例

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在导航栏中垂直居中放置所有元素?

来自分类Dev

如何在div中居中放置垂直文本?

来自分类Dev

如何在多个div中垂直居中放置文本

来自分类Dev

如何在多个div中垂直居中放置文本

来自分类Dev

如何在响应图像上垂直居中放置文本?

来自分类Dev

如何在标题中垂直居中放置文本?

来自分类Dev

如何在画布上垂直居中放置文本

来自分类Dev

如何使用CSS在DIV中垂直居中放置文本?

来自分类Dev

在div中垂直居中放置文本

来自分类Dev

在div中垂直居中放置文本

来自分类Dev

如何在Bootstrap的navbar品牌类中垂直居中放置文本?

来自分类Dev

如何在DIV中垂直和水平居中放置文本

来自分类Dev

如何在具有(流体高度)的响应框中垂直居中放置文本

来自分类Dev

如何在flexbox中垂直居中放置文本,并使图像固定在底部?

来自分类Dev

如何在网格中垂直居中放置所有文本?

来自分类Dev

如何在flutter中水平和垂直居中放置文本字段

来自分类Dev

如何在具有动态变化高度的div中垂直居中放置文本?

来自分类Dev

如何在SPAN中垂直居中放置图像

来自分类Dev

如何在Bootstrap 3中垂直居中放置文字?

来自分类Dev

如何在工具栏中居中放置ImageView?

来自分类Dev

如何在太小的容器中居中放置文本?

来自分类Dev

如何在JavaFX ChoiceBox中水平居中放置文本

来自分类Dev

如何在Android的微调器中居中放置文本

来自分类Dev

如何在水平StackLayout中居中放置文本?

来自分类Dev

如何在容器中居中放置文本?

来自分类Dev

如何在Tkinter中居中放置文本标签?

来自分类Dev

如何在JavaFX ChoiceBox中水平居中放置文本

来自分类Dev

如何在导航栏中放置图标

来自分类Dev

在绝对居中的球体中垂直居中放置文本

Related 相关文章

  1. 1

    如何在导航栏中垂直居中放置所有元素?

  2. 2

    如何在div中居中放置垂直文本?

  3. 3

    如何在多个div中垂直居中放置文本

  4. 4

    如何在多个div中垂直居中放置文本

  5. 5

    如何在响应图像上垂直居中放置文本?

  6. 6

    如何在标题中垂直居中放置文本?

  7. 7

    如何在画布上垂直居中放置文本

  8. 8

    如何使用CSS在DIV中垂直居中放置文本?

  9. 9

    在div中垂直居中放置文本

  10. 10

    在div中垂直居中放置文本

  11. 11

    如何在Bootstrap的navbar品牌类中垂直居中放置文本?

  12. 12

    如何在DIV中垂直和水平居中放置文本

  13. 13

    如何在具有(流体高度)的响应框中垂直居中放置文本

  14. 14

    如何在flexbox中垂直居中放置文本,并使图像固定在底部?

  15. 15

    如何在网格中垂直居中放置所有文本?

  16. 16

    如何在flutter中水平和垂直居中放置文本字段

  17. 17

    如何在具有动态变化高度的div中垂直居中放置文本?

  18. 18

    如何在SPAN中垂直居中放置图像

  19. 19

    如何在Bootstrap 3中垂直居中放置文字?

  20. 20

    如何在工具栏中居中放置ImageView?

  21. 21

    如何在太小的容器中居中放置文本?

  22. 22

    如何在JavaFX ChoiceBox中水平居中放置文本

  23. 23

    如何在Android的微调器中居中放置文本

  24. 24

    如何在水平StackLayout中居中放置文本?

  25. 25

    如何在容器中居中放置文本?

  26. 26

    如何在Tkinter中居中放置文本标签?

  27. 27

    如何在JavaFX ChoiceBox中水平居中放置文本

  28. 28

    如何在导航栏中放置图标

  29. 29

    在绝对居中的球体中垂直居中放置文本

热门标签

归档