vergrößern und zentrieren

KartoffelPantoffel

so sieht meine Website aus: http://prntscr.com/nbv5bg

HTML

<body>
  <form id="loginform" action="index.php" method="post">
    <ul id="lfitems">
      <input type="text" name="name" placeholder="Name">
      <input type="text" name="password" placeholder="Password">
      <button type="submit" name="button">Login</button>
    </ul>
  </form>
</body>

CSS

#loginform {
  position: fixed;
}

#lfitems {
  display: flex;
  flex-direction: column;
}

Ich probiere seit Stunden rum und ich will die zwei Felder und den Knopf in der Mitte haben, was genau soll ich jetzt machen
und ich will alles vergrößern

basti1012

Du hast ja schon mit flex box angefangen

Da gibt es auch befehle das mittig anzuordnen.

Hier kannst du mal testen wie welche befehle reagieren und dann bekommst du auch den Code raus

http://the-echoplex.net/flexyboxes/

Was meinst du mit vergrößern ? Das die Felder und Schrift immer größer sind oder nur beim klick oder hovern oder sonst was ?

Normal größer machen geht mit Css

Zb so

Code

<style>
input{
    height:50px;
    width:300px;
    font-size:40px;
}
</style>

Das es nur größer beim klicken oder hovern wird ist was anderes. Das geht dann mit :hover oder auch Js

KartoffelPantoffel

Danke, das mit height, width und font-size war ganz hilfreich,
mein body hat jetzt display: flex; und justify-content: center;
justify-content: center; ändert aber nur die x-Koordinate,
ich hab' einfach margin-top: 12.5% gemacht und das ist jetzt
ungefähr in der Mitte, geht das auch anders?

basti1012

Es gibt aber auch

align-items:center:

Dann könnte man das auch wie du es machst mit prozente und margin , aber das geht ja auch nur wenn du die höhe des container kennst.( ansonsten wäre JS von nöten).

Zb Container= 400px;

Dann

margin-top:calc(50% - 200px);

oder etwas komplizierter

margin-top:calc((100% / 2) - (200px / 2));

text-align:center gibt es auch noch ,ist aber nicht immer erfolgreich nur bei bestimmten sachen die ich sowieso nicht erklärt bekomme.

Am besten machst du es mit Flexbox weil dann hast du in späteren verlauf ,wenn du die Seite zu ende baust auch kaum probleme mit Responsiven Seitenlayout und so weiter.

margin:auto auto; geht auch ab und zu ,doch da weiß ich jetzt nicht genau wann das genau funktioniert.Das hatte glaube ich was mit den Eltern Element zu tun.

margin:0 auto; = macht das Element mittig auf der Horizontale

margin:auto 0; = auf der vertikalen.

margin:auto auto; = macht es komplett mittig.

Doch gehe da erst Googeln wenn du eine Richtige erklärung brauchst wann und wieso das genau geht,weil meine erklärung versteht sowieso kaum einer. Nicht mal ich selbst

KartoffelPantoffel

Danke, align-items:center; hat mir gefehlt, vor justify-content: center; hab' ich align-items:center; gemacht, aber auf die Idee beides zu machen bin ich leider nicht gekommen, margin hab' ich gerade auch probiert und das ist irgendwie seltsam

basti1012

An besten ist für sowas Flexbox oder auch Grid.

Hier noch ein Link um Flexbox zu lernen ,falls du ihn noch nicht kennst

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

KartoffelPantoffel

danke, den kenn' ich aber schon

vergrößern und zentrieren

Jetzt mitmachen!

Tags