對齊中間的圖像

我試圖對齊頁面中間的圖像，但它沒有做到這一點。目前，它位於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：

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

我要補充，以便/編輯IMG在中間？

來源

2017-08-14 ssss

嘗試做

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

.container { 
    width: 100%; 
} 

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

來源

2017-08-14 16:12:26

有沒有這樣的運氣？ –

#logo { 
    text-align: center; 
}

來源

2017-08-14 16:56:56 Talgat

這絕對不是答案 – Ivan

爲什麼不呢？你試過了嗎？我試過了，它可以在codepen中使用html的這個例子。 – Talgat

我不是說它不起作用，我只是指出你沒有向OP解釋你爲什麼解決他的問題 – Ivan

如果您的標誌，有一組寬度和高度，你很可能只是做

#logo{ 
    margin: 0 auto; 
}

前提是你的圖片涵蓋了整個標誌的容器。如果圖像的尺寸比#logo DIV較小，只需將它添加

#logo{ 
    text-align: center; 
}

水平居中的內容。

來源

2017-08-14 17:04:52 Iruss

對齊中間的圖像

回答

相關問題