CODEWITHSUNDEEP
cssreactjs
ssss
ssss

Reputation: 573

Align an image in the middle

Im trying to align the image in the middle of the page, but its failing to do that. Currently, it's positioned on the very 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 i add/edit in order the img was in the middle?

Upvotes: 0

Views: 78

Answers (3)

Iruss
Iruss

Reputation: 229

If your logo has a set width and height, you could probably just do 

#logo{
    margin: 0 auto;
}

provided that your image encompasses the entire logo container. If your image's size is smaller than the #logo div, you can just add

#logo{
    text-align: center;
}

to center its contents horizontally.

Upvotes: 1

Talgat
Talgat

Reputation: 314

#logo {
  text-align: center;
}

Upvotes: 0

canaan seaton
canaan seaton

Reputation: 6868

try doing 

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

.container {
   width: 100%;
}

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

Upvotes: 1

Related Questions