gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:27:23 25 4
gpt4 key购买 nike

所以我环顾了 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 未正确对齐吗?

谢谢,

最佳答案

尝试将 line-height 更新为与 font-size 相同的大小。也许它适合你。

关于css - IMG 和文本未在我的导航栏中的 Bootstrap 按钮中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47880506/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com