ブートストラップ折りたたみメニューの中央ロゴアイコン

Question

最初のイメージは、フルサイズのブラウザウィンドウでのメニューの外観です。

Full-size menu

メニューは、ウィンドウが一定の幅より狭い場合、小さなメニューボタンを起動し、メニューを開くためにそれを使用ので、ブートストラップを使用しています。しかし、小さなウィンドウでメニューを開くと、メニュー項目と同じ軸にロゴを縦に並べ、開いているメニューボタンで横に並べるようにします。

Small window menu

私は、全体のメニューバーに100％の幅を与え、margin: 0 autoを使用してロゴを中心にしようとしたが、それは動作しませんでした。メニューボタンにposition:absoluteを使用すると、真ん中にロゴの上にある自分のボタンが移動しました。

ありがとうございました！

Answer 1

最も簡単な方法は、それとaboslut変換することです：

.navbar-brand { transform: translateX(-50%); left: 50%; position: absolute;}