Question

所以我环顾了Stackoverflow，无法找到问题的解决方案

奇怪的是

我在这里试试，codepen

<nav>
  <button class="btn btn-primary"> signed in as fermi 
    <img src="https://ui-avatars.com/api/?
     name=Fermi+Fang&background=0D8ABC&color=fff&rounded=true">
  </button>
</nav>

文字完美地对齐中心，

但是根据我的实时代码，它没有

img of my live code

好的继承我的live code

   nav(class="navbar navbar-expand-md fixed-top navbar-light bg-none 
px-sm-4 px-0 pr-2")
  button(id="container" class="navbar-toggler pr-0 ml-0 pl-3" 
type="button" data-toggle="collapse" data-target="#collapsibleNavbar" 
style="border-style:none")
    span(class="navbar-brand pointer mr-0")
      img(class="mr-1 nav-logo-white" src="/images/juu_logo_white.png" 
width="33" height="44.5" alt="")
      img(class="mr-1 nav-logo-black" src="/images/juu_logo_black.png" 
width="33" height="44.5" alt="")
      span(id="icon" class="fa fa-angle-down pr-0 mr-0" 
style="color:white")

  //buttons that are shown in mobile and not collapsed
  ul(class="navbar-nav d-inline d-md-none")
    if isLoggedIn
      div(class="input-group d-inline-flex d-md-none-flex pr-sm-3 pr-
1")
        input(type="text" class="form-control nav-search" id="nav-
search" aria-describedby="nav search" placeholder="Search for...")
        span(class="input-group-btn")
          button(class="btn btn-primary" type="button") <i class="fa 
fa-search"></i>

    else
      li(class="nav-item d-inline")
        button(type="button" class="btn btn-primary m-1" data-
toggle="modal" data-target="#signUpModal") Sign Up
      li(class="nav-item d-inline mr-sm-3")
        button(type="button" class="btn btn-outline-primary m-1" data-
toggle="modal" data-target="#logInModal") Log In

  //navbar that collapses or hidden in mobile
  div(class="collapse navbar-collapse d-md-flex" 
id="collapsibleNavbar")
    a(class="navbar-brand d-none d-md-block " href="/")
      img(class="mx-1 nav-logo-white ml-3" 
src="/images/juu_logo_white.png" width="33" height="44.5" alt="")
      img(class="mx-1 nav-logo-black ml-3" 
src="/images/juu_logo_black.png" width="33" height="44.5" alt="")
    if isLoggedIn
      div(class="input-group d-none d-md-inline-flex mr-auto col-lg-6")
        input(type="text" class="form-control" id="nav-search" aria-
describedby="nav search" placeholder="Search for...")
        span(class="input-group-btn")
          button(class="btn btn-primary" type="button") <i class="fa 
fa-search"></i>

    //shown in non mobile - will collapse when mobile
    ul(class="navbar-nav vertical ml-auto")
      li(class="nav-item")
        br(class="d-inline d-md-none") 

      li(class="nav-item ml-3 ml-sm-0 d-inline-block")
        button(type="button" class="btn btn-link m-1 btn-mob" data-t 
toggle="modal" data-target="#settingsModal") Settings
      if isLoggedIn
        li(class="nav-item ml-3 ml-sm-0 d-inline-block")
          button(type="button" class="btn btn-link m-1 btn-mob" data-
toggle="modal" data-target="#helpModal") Help 
        li(class="nav-item dropdown d-none d-md-inline-block ml-3 ml-
sm-0")
          button(type="button" class="btn btn-link m-1 btn-mob" data-
toggle="dropdown" ) Signed in as #{user.firstname} 
          ul.dropdown-menu
            li(class="nav-item")
              button(type="button" class="btn btn-link m-1" data-
toggle="modal" data-target="#userProfileModal") User Profile
            li(class="nav-item")
              a(role="button" class="btn btn-link m-1" href="/logout") 
Log Out
        li(class="nav-item ml-3 ml-sm-0 d-inline-block")
          button(type="button" class="btn btn-link m-1 btn-mob d-md-
none" data-toggle="modal" data-target="#userProfileModal") User Profile
        li(class="nav-item ml-3 ml-sm-0 d-inline-block")
          a(role="button" class="btn m-1 btn-mob d-md-none" 
href="/logout") Log Out

    //hidden in mobile view
    ul(class="navbar-nav mr-2")
      if isLoggedIn

      else
        li(class="nav-item")
          button(type="button" class="btn btn-primary m-1 d-none d-md-
block" data-toggle="modal" data-target="#signUpModal") Sign Up
        li(class="nav-item")
          button(type="button" class="btn btn-outline-primary m-1 d-
none d-md-block" data-toggle="modal" data-target="#logInModal") Log In

有什么可能导致文本和我的按钮中的img无法正确对齐的线索？

谢谢，

Answer 1

尝试更新line-height与font-size相同的尺寸。也许它适合你。

IMG和文本未在导航栏中的Bootstrap按钮中对齐

1 个答案: