如何垂直对齐 logo.png 和文本

Question

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
       <a class="navbar-brand wrapText" href="#stage"><span><img src="img/icon.png" width="24px"/>&nbsp;SCOTTIESCOTSMAN</span></a>
            <button class="navbar-toggle" data-toggle ="collapse" data-target = "mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
       <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#service">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#project">PROJECTS</a>
                </li>              
                <li class="nav-item">
                    <a class="nav-link" href="#blog">BLOG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

如何垂直对齐 logo.png 和文本...而且我的图标栏不起作用，因为单击时没有菜单出现。 ...对不起新手:)

Answer 1

在徽标图片上尝试 vertical-align: middle class?

Answer 2

如果您希望您的图像作为文本的背景，您只需将图像设置为 .navbar-brand 的背景，然后在 css 中设置大小，如下所示：

.navbar-brand{
  background:url('http://placehold.it/25x25');
  background-position:center;
  background-repeat:no-repeat;
  background-size: 24px 24px;
}

这是一个 fiddle 向您展示的实际操作 Fiddle Demo

如果您希望文字和图片看起来像在同一行上（图片比文字大），请像这样为图片添加行高：

.navbar-brand img{
  width:24px;
  line-height:50px;
  display:inline-block;
}

这是 fiddle Fiddle Demo

此外，您的导航栏中还缺少 div，您应该将导航栏品牌和响应按钮包裹在一个名为 navbar-header 的 div 中。然后让你的菜单在你的按钮中打开你的数据目标应该阅读#mainNavbar你错过了#。您的导航栏应如下所示：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
     <div class="navbar-header">
       <a class="navbar-brand" href="#stage">SCOTTIESCOTSMAN</a>
            <button class="navbar-toggle" data-toggle ="collapse" data-target = "#mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
       </div>
       <div class="collapse navbar-collapse" id="mainNavBar">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#service">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#project">PROJECTS</a>
                </li>              
                <li class="nav-item">
                    <a class="nav-link" href="#blog">BLOG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

如何垂直对齐 logo.png 和文本

how do I vertically align the logo.png and the text

css

valign

navbar