Środkowanie form po użyciu float

Question

Witam. Mam problem z wyśrodkowaniem <form> po użyciu left. Udało mi się to zrobić przy użyciu position: absolute, jednak stwarzało mi to trochę problemów. Strona wygląda tak:

I muszę sprawić, aby te <form> było na środku białej części ekranu bez użycia position: absolute. Całkowicie nie mam na to pomysłu. Kod wygląda tak:

plik html:

<div id="container">
    <div id="oblique">
        <img src="../../assets/img/logo.png">
    </div>
<form #registerForm="ngForm" (ngSubmit)="registerUser(registerForm);">
        <h1 id="motto">Everything <br><br>we can do, <br><br>is for you!</h1>
        <br><br>
        <mat-form-field appearance="fill" class="formField">
            <mat-label>E-mail</mat-label>
            <input type="email" matInput ngModel name="Email" required>
        </mat-form-field><br>
        <mat-form-field appearance="fill" class="formField">
            <mat-label>Username</mat-label>
            <input type="text" matInput ngModel name="UserName" required>
        </mat-form-field><br>
        <mat-form-field appearance="fill" class="formField">
            <mat-label>Password</mat-label>
            <input type="password" matInput ngModel required name="Password" [type]="hide ? 'password' : 'text'">
            <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
                [attr.aria-pressed]="hide">
                <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
            </button>
        </mat-form-field><br>
        <mat-form-field appearance="fill" class="formField">
            <mat-label>Repeat password</mat-label>
            <input type="password" matInput ngModel required name="RepeatPassword" [type]="hide2 ? 'password' : 'text'">
            <button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'"
                [attr.aria-pressed]="hide2">
                <mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
            </button>
        </mat-form-field><br>
        <button mat-raised-button color="primary" type="submit">Register</button><br>
        <a href="user/login">Already have an account? Sign in</a>
    </form>
</div>

A CSS:

@media(max-height: 568px), (max-width: 820px) {
    #oblique, #oblique>img {
        display: none;
    }
}

@media(min-height: 568px), (min-width: 820px) {
    #oblique {
        float: left;
        border-top: 100vh solid #202020;
        border-right: 10vw solid transparent;
        width: 50vw;
        height: 0;
    }
    #oblique>img {
        position: absolute;
        top: 50%;
        left: 27.5%;
        transform: translate(-50%, -50%);
    }
}

.formField {
    width: 20vw;
    margin-bottom: 30px;
    max-width: 300px;
}

/*form {
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 80%;
    top: 50%;
    text-align: center;
}*/

form {
    float: left;
}

@media(max-height: 568px), (max-width: 820px) {
    form {
        position: static;
        left: 0;
        top: 0;
        transform: translate(0, 0);
    }
    .formField {
        width: 50vw;
    }
}

#motto {
    font-family: 'Just Another Hand', cursive;
    font-size: 72px;
    margin-top: 30px;
}

 

Answer 1

może zamiast float:left spróbuj flexboxa i justify-content: center

Comments

O, działa. Ale jak to teraz wyśrodkować w pionie?

---

A to już znajdź sobie sam tu: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Moim zdaniem, użycie grid-a i linear-gradient, znacząco uprości kod.  

 

Propozycja

<div class="container">

  <div class="panel panel-left">
    <img src="../../assets/img/logo.png">
  </div>

  <div class="panel-middle"></div>

  <div class="panel panel-right">
    <div class="form-container">
      <h1 id="motto" class="motto">Everything <br><br>we can do, <br><br>is for you!</h1>

      <form #registerForm="ngForm" (ngSubmit)="registerUser(registerForm);">
        <mat-form-field appearance="fill" class="formField">
          <mat-label>E-mail</mat-label>
          <input type="email" matInput ngModel name="Email" required>
        </mat-form-field><br>
        <mat-form-field appearance="fill" class="formField">
          <mat-label>Username</mat-label>
          <input type="text" matInput ngModel name="UserName" required>
        </mat-form-field><br>
        <mat-form-field appearance="fill" class="formField">
          <mat-label>Password</mat-label>
          <input type="password" matInput ngModel required name="Password" [type]="hide ? 'password' : 'text'">
          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
            <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
          </button>
        </mat-form-field><br>
        <mat-form-field appearance="fill" class="formField">
          <mat-label>Repeat password</mat-label>
          <input type="password" matInput ngModel required name="RepeatPassword" [type]="hide2 ? 'password' : 'text'">
          <button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide2">
            <mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
          </button>
        </mat-form-field><br>
        <button mat-raised-button color="primary" type="submit">Register</button><br>
        <a href="user/login">Already have an account? Sign in</a>
      </form>

    </div>
  </div>

</div>

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
html, body {
  width: 100vw;
  height: 100vh;
}
.container {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "panel-left panel-middle panel-right";
 
  width: 100%;
  height: 100%;
 
  --panel-left-bg-color: #202020;
  --panel-right-bg-color: transparent;
}
.panel {
  display: flex;
  justify-content: center;
  align-items: center;
}
.panel-left { 
  grid-area: panel-left; 
  background-color: var(--panel-left-bg-color);
}
.panel-middle { 
  grid-area: panel-middle;
  background-image: linear-gradient(99deg, var(--panel-left-bg-color) 50%, var(--panel-right-bg-color) 51%);
}
.panel-right { 
  grid-area: panel-right;
  background-color: var(--panel-right-bg-color);
}
.panel-right .form-container {
  width: 40vw;
  max-width: 300px;
  border: 1px solid red; /* dla demonstracji do usunięcia */
}
.panel-right .motto {
  font-family: 'Just Another Hand', cursive;
  font-size: 3em;
}

 

Comments

Fajnie to wygląda, ale raczej tego nie użyję, gdyż nie lubię używać tego czego kompletnie nie rozumiem. I raczej w bliskiej przyszłości się tego nie nauczę, ponieważ moim celem jest backend, a frontend to dla mnie taka "zmora" :). Ale dzięki!