html - 如何让链接在导航栏中以图像为中心而不是在顶部?

标签 html css twitter-bootstrap

    <!DOCTYPE html>
<html>
    <head>
        <title>Funky Munky Arcade</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

        <nav class="navbar navbar-default navbar-fixed-top">

            <div class="container">

                <div class="navbar-header">

                    <a href="/index.html" class="navbar-left"><img src="FMA_Logo.png" class="logo"></a>

                </div>

                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Parties</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>

            </div>

        </nav>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>
</html>

这就是我目前所拥有的。我有一个指向我自己的当前没有样式的样式表的链接。到目前为止只是 html。我试图让它到达链接以图像为中心的位置,而不是位于顶部。如果可能,我宁愿不使用填充。

最佳答案

你可以给父类添加一个类,并将其设置为display: flex; align-items: center; 使元素垂直居中。

.nav-container {
  display: flex;
  align-items: center;
}
<!DOCTYPE html>
<html>

<head>
  <title>Funky Munky Arcade</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container nav-container">

      <div class="navbar-header">

        <a href="/index.html" class="navbar-left"><img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="logo"></a>

      </div>

      <ul class="nav nav-justified">
        <li><a href="#">Home</a></li>
        <li><a href="#">Parties</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

    </div>

  </nav>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

关于html - 如何让链接在导航栏中以图像为中心而不是在顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43577674/

相关文章:

python - 如何在python中向后搜索?

html - 在引用 css 中的文本时垂直居中元素

html - Bootstrap 列在移动设备上垂直堆叠

html - 如何给这些图像之间的间距

javascript - 选择悬停时触发 Bootstrap 弹出窗口

javascript - 这段 VB 代码是如何自动添加的?

html - div 内的分区(如侧边栏)无法正常工作

html - IE 11 上的字体支持

javascript - 如何调整图像大小以适应按下按钮时的容器高度?

jquery - 修改 jQuery Mobile (jqm) 文件上传按钮