画像を中央に揃える

Question

画像をページの中央に揃えようとしていますが、それを行うことができません。現在、containerの左端に位置しています。コードレンダリングのに反応：

return (
      <div> 
       <div className="container"> 
        <div id="logo"> 
         <img src={require('../../images/vidn_logo.png')} /> 
        </div> 
        {heading} 
        <form className="form-signin" onSubmit={this.formSubmit}> 
         <input onChange={this.setEmail} type="email" className="form-control" 
           autoComplete="email" placeholder="Email" required></input> 
         <input onChange={this.setPass} type="password" className="form-control" 
           autoComplete="new-password" placeholder="Password" required></input> 
         <button className="btn btn-lg btn-primary btn-block" 
           type="submit" style={{marginTop: '20px'}}>Log In</button> 
        </form> 
       </div> 
       <Footer /> 
      </div> 
     ) 

をCSS：IMGが真ん中にあったために、

.container { 
     width: auto; 
     padding: 60px 0 100px; 
    } 
#logo { 
     margin-bottom: 50px; 
     height: 30px; 
    } 

は私が/編集何を追加する必要がありますか？あなたのロゴは、設定された幅と高さを持っている場合

Answer 1

は

<div className="logo-wrapper"><div id="logo>...</div></div> 

.container { 
    width: 100%; 
} 

.logo-wrapper { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
} 

Answer 2

#logo { 
    text-align: center; 
} 

Answer 3

をやってみてください、あなたはおそらくちょうど

#logo{ 
    margin: 0 auto; 
} 

は、あなたのイメージが全体のロゴコンテナを包含するものとするんでした。 あなたの画像のサイズが#logoのdiv要素よりも小さい場合は、あなただけ水平にその内容を中心に

#logo{ 
    text-align: center; 
} 

を追加することができます。