navbarの中の他の要素もそうであるとき、navbarにロゴを集中させるには？

Question

ナビゲーションバーには、中央に表示するロゴと、左に浮かべるメニューボタンの画像（3行）があります。 Iveは左に浮かぶメニューボタンを手に入れましたが、ロゴをNavbarの正確な中心に置くようには見えません。 Iveはdivの両方にputtinを入れてdiv幅を50％に設定してから、画像を左に浮かせて、中央に置いて運がないようにしました。

HTML：

<div id="resp-navbar"> 
    <div id="resp-nav-contents"> 
     <img id="exp-menu-img" src="3lines.png"> 
     <img id="resp-logo" src="MSLOGO.jpg"> 
    </div> 
</div> 

CSS：

#resp-navbar{ 
    height: 15%; 
    text-align: center; 
    width: 100%; 
    display: inline-block; 
    position: fixed; 
    z-index:51; 
    background-color: white; 
    border-bottom: solid; 
    border-width: 1px; 
    border-color: #afafaf; 

} 

#resp-nav-contents{ 
    min-width: 300px; 
} 

#exp-menu-img{ 
    height: 30%; 
    position: absolute; 
    left: 2%; 
    top: 50%; 
    transform: translateY(-50%); 
    opacity: 0.4; 
    cursor: pointer; 
} 

#resp-logo{ 
    height: 50%; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    display: inline; 
} 

Answer 1

を追加しました：left: 0; right: 0; margin: auto;#resp-logo

#resp-navbar{ 
 
    height: 15%; 
 
    text-align: center; 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: fixed; 
 
    z-index:51; 
 
    background-color: white; 
 
    border-bottom: solid; 
 
    border-width: 1px; 
 
    border-color: #afafaf; 
 

 
} 
 

 
#resp-nav-contents{ 
 
    min-width: 300px; 
 
} 
 

 
#exp-menu-img{ 
 
    height: 30%; 
 
    position: absolute; 
 
    left: 2%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    opacity: 0.4; 
 
    cursor: pointer; 
 
} 
 

 
#resp-logo { 
 
    height: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    display: inline; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div id="resp-navbar"> 
 
    <div id="resp-nav-contents"> 
 
     <img id="exp-menu-img" src="https://placehold.it/20x20"> 
 
     <img id="resp-logo" src="https://placehold.it/500x100"> 
 
    </div> 
 
</div>

Answer 2

する

<div id="resp-navvar> 
    <img id="exp-menu-img" src="3lines.png"> 
    <img id="resp-logo" src="MSLOGO.jpg"> 

を助けるかもしれない以下を使用position: absolute;として、メニューアイコンを設定してみてください、残り

Answer 3

を正規化

#resp-logo { 
positions:absolute; 
left:50%; 
Transform:translate(-50%); 

Width-カスタム、height-カスタム }

物事が

Answer 4

は＃1 RESP-ロゴ

からこれらを削除動作しない場合は相対的にルートdivの位置を置くことを忘れないでください

位置：絶対;表示：インライン;

または、マージンを使用して中央に配置することができます。