bootstrap fixed navbar вертикальное выравнивание вопрос

Question

Я добавил загрузочную навигационную панель Bootstrap на моей главной странице проекта ASP.net, у нее был логотип и текст авторского права (чтобы сделать его простым, я заимствовал логотип Microsoft). Я хотел их в одной строке, поэтому я применил стиль .navbar-left к своему родителю, работал, однако, я обнаружил, что текст выровнен по верхнему краю, я хочу, чтобы он имел вертикальное выравнивание по центру, как этого достичь? Благодарю.

<div class="navbar navbar-default navbar-fixed-bottom" id="footer"> 
<ul class="nav navbar-nav navbar-left"> 
    <li><img src="http://c.s-microsoft.com/en-us/CMSImages/mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" alt="MSTF Logo"/></li> 
    <li><p>&copy; 2015 Microsoft. All rights reserved</p></li> 
</ul> 

http://jsfiddle.net/tz783rkn/5/

Answer 1

добавить этот код в IMG тег:

style="float:left; margin-right:7px;"

Например:

<img style="float:left; margin-right:7px;" 
src="http://c.s-microsoft.com/en-us/CMSImages/ 
mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" 
alt="MSTF Logo"/> 

увидеть это: http://jsfiddle.net/tz783rkn/7/ оттуда вы можете установить маржу-верх второго <li>, чтобы сделать его приятно видеть

ОБНОВЛЕНО: http://jsfiddle.net/tz783rkn/9/

Answer 2

Есть несколько различных способов сделать то, что вы пытаетесь сделать :

Во-первых: Если размер вашего логотипа предопределен, тогда вы можете добавить класс, назовите его «авторским текстом», элементу списка, содержащему текст. Затем мы могли бы стилизовать элемент и дать ему некоторый запас сверху (и слева), чтобы придать внешнему виду, что он расположен в центре.

.copyright-text { 
    margin-top: px; 
    margin-left: 10px; 
} 

Вот скрипка, показывающая, что подход: http://jsfiddle.net/tz783rkn/8/

Второго: второй подход задает отображение окружающего контейнера для отображения в качестве «стола», а затем создать внутренний элемент «Див» с на дисплее установлено значение «table-cell». Это позволяет использовать свойство CSS с вертикальным выравниванием, которое позволяет размещать элементы в середине родительского элемента, подобно тому, как вы можете в таблицах. Это требует перестройки вашего HTML немного и добавить некоторые дополнительные классы или встроенные стили:

HTML:

<div class="navbar navbar-default navbar-fixed-bottom" id="footer"> 
<ul class="nav navbar-nav navbar-left"> 
    <li class="table-container"> 
     <div class="tabel-cell-container"> 
      <img src="http://c.s-microsoft.com/en-us/CMSImages/mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" alt="MSTF Logo"/> 
      <p class="copyright-text">&copy; 2015 Microsoft. All rights reserved</p> 
     </div> 
    </li> 
</ul> 

CSS:

.navbar { 
    min-height: auto; 
} 
li.table-container { 
    display: table; 
} 
.tabel-cell-container { 
    display: table-cell; 
    vertical-align: middle; 
} 
.copyright-text { 
    display: inline-block; 
    margin-left: 10px; 
} 

Вот скрипку с помощью дисплея таблицы подход: http://jsfiddle.net/tz783rkn/16/

Трудно t o увидеть результат с такой небольшой областью, чтобы вы могли преувеличивать высоту элемента списка, чтобы увидеть, как он позиционирует дочерние элементы в середине родительского элемента, как показано на рисунке here.

Надеюсь, это поможет.