css - Align an image in the middle -
im trying align image in middle of page, failing that. currently, it's positioned on left side of container
. react's render code:
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; }
what should add/edit in order img in middle?
try doing
<div classname="logo-wrapper"><div id="logo>...</div></div> .container { width: 100%; } .logo-wrapper { display: flex; justify-content: center; width: 100%; }
Comments
Post a Comment