ロゴをセンターに配置

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およびinline-block要素に適用されるため、要素をtext-align: centerに配置することができます。親要素はblock要素である必要があります。
3. 簡略化規則margin: autoを宣言することにより、block要素を集中させることができますが、実際には左右の余白の値をautoにする必要があります。ブラウザは、使用可能なスペースを計算し、エレメントを適切な場所に配置します。フレックスについて
4. - それは、従来のブラウザ（例：IE 8 & 9）でノーサポートに少しを持っている - 実際に、私はまだ経験、古いブラウザ（IE 10 & 11、Firefoxの& SafariのようなWebKitのブラウザの一部の古いバージョンでは部分的なサポートSafariに関するほとんどのケースで悪いサポート、非推奨の構文バージョン、またはハイブリッド構文のバリエーションは最新バージョンではなくサポートされています）。ベンダーのプレフィックスと一般的な位置決めルール（前述のinline-blockまたはblockメソッドのような）をフォールバックとして適用する必要があるかもしれません。

参照：flex - CSS|MDN & caniuse.com詳細については、およびフレキシボックスに自分自身を教育、それをサポートするだけで改善していると非常に近い将来に、より一般的になって、今それに慣れる開始します。

カスタムルールを宣言した後でレスポンシブスタイルをチェックすると、特定のブレークポイントが満たされたときに対応する必要があります。