如何在此導航欄中的徽標中將img垂直居中？

Question

JSFiddle在這里。

正如您在給定的SSCCE中看到的那樣，徽標中的圖像與旁邊的文字不太吻合。 我需要完美的<img>和相鄰的<span> ，以便它們在垂直居中對齊，而不是共享同一基線。

我有這個：

我需要這個：

那我該怎么做呢？

vertical-align:middle; 到.brand-logo或.brand-logo > img或同時.brand-logo > img和.brand-logo > span沒有幫助。

將類valign-wrapper添加到a.brand-logo或div.nav-wrapper也無濟於事。 （ 來源 ）

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/> <nav class="black"> <div class="nav-wrapper"> <a class="brand-logo center brown-text text-lighten-4" href="#"><img alt="" src="https://sworg/about/images/logos/wordpress-logo-simplified-rgb.png" width="40px" height="40px" class="responsive-img" /> <span>BRAND</span> </a> </div> </nav> 

Answer 1

嘗試vertical-align: middle; span和image嘗試這個

span,img{
  vertical-align: middle;
}

 .brand-logo > span,.brand-logo > img{ vertical-align: middle; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/> <nav class="black"> <div class="nav-wrapper"> <a class="brand-logo center brown-text text-lighten-4" href="#"><img alt="" src="https://sworg/about/images/logos/wordpress-logo-simplified-rgb.png" width="40px" height="40px" class="responsive-img" /> <span>BRAND</span> </a> </div> </nav> 

Answer 2

使用flexbox和垂直對齊應該可以解決問題。

 .brand-logo.center.brown-text.text-lighten-4 { display: flex; align-items: center; justify-content: flex-start; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/> <nav class="black"> <div class="nav-wrapper"> <a class="brand-logo center brown-text text-lighten-4" href="#"><img alt="" src="https://sworg/about/images/logos/wordpress-logo-simplified-rgb.png" width="40px" height="40px" class="responsive-img" /> <span>BRAND</span> </a> </div> </nav>