Как правильно выровнять изображение бренда в загрузочной машине

Question

Это не дубликат this. Этот вопрос заключается в замене текстового логотипа на изображение. Этот вопрос касается размещения изображения в дополнение к текстовому логотипу.

У меня есть следующий код начальной загрузки, который пытается показать логотип сайта, за которым следует его имя. Я использую класс начальной загрузки NavBar-бренд, чтобы сделать так:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html"> 
       <img src="./EnterpriseCopy_files/android-icon-48x48.png"> 
      </a> 
      <a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">Enterprise Copy</a> 
     </div> 
     <div class="navbar-collapse collapse"> 

Логотип заканчивает тем, как это:

Затем я должен добавить style="margin-top:-13px" к img тега, чтобы толкать вверх изображение и сделать его хорошо выглядеть:

Это не может быть правильным способом. Есть ли лучший способ сделать это?

Оригинальный код here, один со стилем tweak here.

Answer 1

Проблемы с .navbar-brand имеющего дополнения:

padding: 15px 15px; 

Это в стиле Bootstrap по умолчанию. Поэтому удалите это и дайте:

.navbar-brand {padding: 0;} 

Вы все поставили. Смотрите скриншот, где я дал padding: 0;, чтобы увидеть его работу:

Answer 2

Если хотите добавить как изображение и текст внутри navbar-brand класса вместо разделения их, применять display: inline-block к вашему IMG, а затем настроить отступы для navbar-brand сам, чтобы разместить все.

.navbar .navbar-brand { 
    padding: 2px 15px; 
} 

.navbar .navbar-brand img { 
    display: inline-block; 
} 

Просмотреть рабочий фрагмент.

body { 
 
    padding-top: 50px; 
 
    padding-bottom: 20px; 
 
} 
 
/* Wrapping element */ 
 

 
/* Set some basic padding to keep content from hitting the edges */ 
 

 
.body-content { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 
/* Set widths on the form inputs since otherwise they're 100% wide */ 
 

 
input, 
 
select, 
 
textarea { 
 
    max-width: 280px; 
 
} 
 
/* Carousel */ 
 

 
.carousel-caption { 
 
    z-index: 10 !important; 
 
} 
 
.carousel-caption p { 
 
    font-size: 20px; 
 
    line-height: 1.4; 
 
} 
 
@media (min-width: 768px) { 
 
    .carousel-caption { 
 
    z-index: 10 !important; 
 
    } 
 
} 
 
/**ADDED CSS**/ 
 

 
.navbar .navbar-brand { 
 
    padding: 2px 7.5px; 
 
} 
 
.navbar .navbar-brand img { 
 
    display: inline-block; 
 
} 
 
/**ADDED CSS**/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html"> 
 
     <img src="http://vbrad.com/misc/EnterpriseCopy_files/android-icon-48x48.png">Enterprise Copy 
 
     </a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Mailbox</a> 
 
     </li> 
 
     <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Copy Groups</a> 
 
     </li> 
 
     <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Home</a> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="https://localhost:44302/#">bar@foo.com</a> 
 
     </li> 
 
     <li><a href="https://localhost:44302/Account/SignOut">Sign Out</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>