IMG와 텍스트,

Question

그래서 난 유래 둘러 보았다 및

내가 여기에 시도

이상하게도 내 문제에 대한 해결책을 찾을 수 couldnt는 내 메뉴 바에서 부트 스트랩 버튼에 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

확인을 heres 내 버튼의 텍스트와 IMG의 원인이 될 수있는 것을 내 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 

모든 단서가 올바르게 정렬되지 하는가?

덕분에,

Answer 1

봅니다 font-size로 line-height 같은 크기를 업데이트합니다. 아마도 그것은 당신을 위해 작동합니다.