CODEWITHSUNDEEP
cssangularsass
Lint
Lint

Reputation: 935

How to center align two elements?

I've a login form and a logo, I centered the form but I want the logo to appear on the top of it, even when I apply the same class as I apply to login form, it appears to the left of form Here are the classes I'm using on the form and dive outer to the form

.center {
    background: #bdc3c7;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2c3e50, #bdc3c7);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-form {
    // min-height: 60%;
    min-width: 250px;
    width: 20%;
}

and here is my html code

<div class='center'>
    <img src='../../../../assets/images/logos/fuse.svg' alt='logo'>
    <form (ngSubmit)="loginUser()" class='login-form'>
        <p>
            <mat-form-field>
                <input type="text" [(ngModel)]='email' matInput placeholder="Email" name='email'>
            </mat-form-field>
        </p>

        <p>
            <mat-form-field>
                <input type="password" [(ngModel)]='password' matInput placeholder="Password" name='password'>
            </mat-form-field>
        </p>
        <div class="button">
            <button type='submit' mat-raised-button style='font-size: 20px;'>Login</button>
        </div>
    </form>
</div>

click the link to get an idea what I'm talking about https://i.sstatic.net/s58YF.jpg

Upvotes: 0

Views: 53

Answers (2)

Neha Sharma
Neha Sharma

Reputation: 772

2 small changes were required: adding flex-direction and removing the min-width.

Here is the working solution: https://codepen.io/NehhaSharma/pen/XWWaxKX

Thanks,

Neha

Upvotes: 1

Mohamed Rashiq
Mohamed Rashiq

Reputation: 322

It is because you are using flex. 'flex-direction' is 'row' by default. so the elements will show in single row. try out following. 

.center {
flex-direction:column;
}

please add this to the center class.

Upvotes: 2

Related Questions