对齐中间的图像

我试图对齐页面中间的图像，但它没有做到这一点。目前，它位于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

对齐中间的图像

回答

相关问题