Место Логотип в Центре

Question

У любого есть совет относительно того, как центрировать следующий логотип. Извинения за начальный вопрос. Спасибо!

http://demo.themeum.com/html/triangle/1.1/

Answer 1

inline-block метод:

.navbar-header { 
    display: block; 
    float: none; 
    text-align: center; 
} 

.navbar-header a.navbar-brand { 
    float: none; 
} 

block метод:

.navbar-header { 
    display: block; 
    float: none; 
} 

.navbar-header a.navbar-brand { 
    float: none; 
    display: block; 
} 

.navbar-header a.navbar-brand img { 
    display: block; 
    margin: auto; 
} 

flex метод:

.navbar-header { 
    display: flex; 
    float: none; 
    justify-content: center; 
} 

Вышеуказанные методы будут центрировать логотип над навигацией. Я не вижу другого способа, которым вы хотели бы сосредоточиться.

Ключевые аспекты здесь являются:

1. Убейте float правил, объявленные для этих элементов, поплавки отрицают отображаемые значения в большинстве случаев.
2. Вы можете центрировать inline-block элементов с text-align: center, так как это правило применяется к вложенным inline и inline-block элементам. Обратите внимание, что родительский элемент должен быть элементом block.
3. Вы можете центрировать block элементов, объявив правило стенографии margin: auto, но это действительно левые и правые значения полей, которые должны быть авто. Браузер вычисляет доступное пространство между ними и соответствующим образом центрирует элемент.
4. Что касается гибкости - она ​​имеет практически нет поддержки в устаревших браузерах (например: IE 8 & 9), частичная поддержка в старых браузерах (IE 10 & 11, некоторые старые версии WebKit браузеров, таких как Firefox & Safari - на самом деле я до сих пор опыт плохая поддержка в большинстве случаев, когда речь идет о Safari, версия устаревшей синтаксиса или гибридное синтаксическое изменение по-прежнему поддерживается, а не последняя версия). Возможно, вам придется применять некоторые префиксы поставщиков и общие правила позиционирования (например, вышеупомянутые методы inline-block или block) в качестве резервных копий.

см: flex - CSS|MDN & caniuse.com для получения дополнительной информации и воспитывать себя на Flexbox, поддержка для этого только улучшается, и будет становиться все более распространенным в ближайшем будущем, так что начать ознакомление с этим сейчас.

Проверьте свои отзывчивые стили после объявления пользовательских правил, вам, скорее всего, придется соответствующим образом учитывать это изменение при соблюдении определенных контрольных точек.