[HTML/CSS] Zwei Form Elemente nebeneinander in die Mitte des Bildschirms?

Hallo Leute, ich würde gerne meine beiden Input Elemente nebeneinander in die Mitte des Bildschirms haben. Habe schon versucht ein DIV außenrum zu erstellen und diesem text-align:center zu geben. Hat leider nicht geholfen.

Mein Code:

<div class="upperForm form-row">
  <div class="form-group">
    <label for="name1">Name</label>
    <input type="text" class="form-control main-input" id="name1" placeholder="">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control main-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
</div>

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

TheTrueSherlock

10.04.2018, 21:42

https://jsfiddle.net/go5pdby2/7/
Mit Flexboxen erreichst du das: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Meinst du das wirklich so? Finde ich nicht ganz so hübsch..
Aber ansonsten fehlt jetzt nur noch bisschen Margin, einen Abstand dazwischen :)

Woher ich das weiß:Berufserfahrung – Fachinformatiker für Anwendungsentwicklung

ChrisFragtGern

Beitragsersteller

10.04.2018, 21:57

Ja genau Margin kommt natürlich noch dazu. Ich soll ein fertiges Wireframe nur nachbauen, deswegen kann ich da nicht soviel dran machen.
Hat super funktioniert danke dir.

Tallerik

10.04.2018, 21:38

Versuch mal:

.upperForm {
    width: 100%;
 }
.form-group {
    margin-left: auto;
    margin-right: auto;
    width: 40%; /*Beispiel*/
}

ChrisFragtGern

Beitragsersteller

10.04.2018, 21:57

mh, sah bei mir leider nicht so gut aus. Habe es mit der obrigen Lösung hinbekommen. Danke

st0ne183

10.04.2018, 21:41

Klappt, habe es gerade mal ausgetestet.

Ähnliche Beiträge

Wie kann ich zwei DIV-Elemente nebeneinander bekommen?

Hallo,

ich wollte eine Internetseite mit HTML erstellen, auf der ich mich im Kopfbereich vorstelle und rechts von mir ein Bild sein soll.

Kann mir jemand helfen, wie ich das hinbekomme? Wie bekomme ich die div-Elemente nebeneinander? Und wie kann ich dem div dann sagen, dass das Bild oben rechts sein soll und in dem anderen div der Text zentriert wird?

...zum Beitrag

Kann jemand das Perfekt übersetzten?

one day someone will walk into your life and make you see why it never worked out with anyone else

...zum Beitrag

Grundig-Fernseher, komisches Bild?

Hallo,

ich habe heute einen Film geguckt und es war alles normal. Dann habe ich den Fernseher ausgemacht und später wieder eingeschaltet. Dann war die Mitte des Bildschirms ganz normal aber alles außenrum war dunkel, es sah irgendwie vernebelt aus.

Weiß jemand was das ist und was man tun kann?

Mfg

...zum Beitrag

Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

...zum Beitrag

Besser arbeiten mit einem 40 Zoll- oder zwei 24 Zoll Monitoren?

Hallo,

die Frage steht ja bereits vollständig im Titel:

Ist es für einen Arbeitsplatz besser einen 40 Zoll Einzelbildschirm oder 2 Stück 24 Zoll Monitore nebeneinander zu haben.

Es geht dabei hauptsächlich um Office Tätigkeiten, heisst WORD, EXCEL (grosse Tabellen und Dashboards), PowerBI, PPT, email, aber auch mal Mockups erstellen wie Bildschirme später aussehen sollen (axure). Kein Videoschnitt oder so…

Oft habe ich dann auch zwei Dokumente auf (rechts ablesen, links eintippen sozusagen) und nebenbei noch WEBEX oder MS TEAMS laufen und das alles auf einem Laptop mit momentan einem 22 Zoll Bildschirm ist nicht prickelnd da andere Aufllösung, Höhe usw. Wenn ich da eine Tabelle über beide Bildschirme ziehe, dann habe ich da halt einen Höhenversatz drin. Und beim hin und herschauen ist das auch eher unergonomisch.

Besten Dank für Tips,

...zum Beitrag

div genau mittig zentrieren?

Hi, ich will ein <div> mittig zentrieren, also nicht nur horizontal sondern auch vertikal, also einfach in der Mitte des Bildschirms. Jemand ne Idee wie das gehen könnte, hab schon fast das ganze Internet durchkämmt...

So soll das am Ende sein... DANKE!!!

...zum Beitrag

HTML | Text Element zentrieren?

Hallo, ich habe einen Div-Bereich in dem ein Text Element ist. Dieses möchte ich aber vertikal zentrieren bzw. genau in die Mitte des Div-Bereiches ( also das es ganz links ist, aber dafür in der Mitte ist ).

Und generell, wie passe ich den Margin eines Textelementes nur im Div-Bereich an, ohne dabei den Divbereich zu verschieben?

Danke im Voruas

...zum Beitrag

HTML Dinge nebeneinander anordnen?

Hi, ich habe etwas HTML und CSS geschrieben und das Ergebnis ist nicht wie ich es mir gewünscht habe. Ich will versuchen, dass das Bild ganz links auf der Website ist, in der Mitte das Willkommen und ganz rechts der link zu einer anderen Page. Ich habe versucht, die Elemente zu positionieren, aber irgendwie verändert sich die Position nicht. Kann jemand den Fehler hier vielleicht schnell finden? Danke schonmal!

...zum Beitrag

Drei Elemente nebeneinander in HTML?

Hallo miteinander ich bin wieder mal am Programmieren und dabei bin ich auf folgendes Problem gestoßen:Links von der Seite sollte die Navigation sein in der Mitte der Inhalt und Rechts sollten die SN wie Facebook,Twitter,Google+,YT verlinkt sein. Jedoch finde ich im web nur anleitungen wie man html so aufbaut das zwei elemente nebeneinander sind also navigation darüber, darunter links inhalt rechts verlinkungen und darunter wiederum ein footer. Jetzt währe ich auf die Methode Float gestoßen und da währen dann auch alle Drei Elemente nebeneinander. Jedoch tritt dann Folgendes Problem auf: Wenn ich einen Footer anfügen möchte ist das Nicht möglich da sich der Footer dann ca 200px unter dem anfang vom Content befindet (hierbei ist das Problem der Cont. hat immer eine mindest Höhe von 500px, das heist der Footer verschwindet hinter dem Cont.) Jetzt die Frage weis jemand von euch eine Möglichkeit in CSS das man drei Elemente nebeneinander anordnet ohne das man den Befehl Float benutzt?

...zum Beitrag

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zum Beitrag

HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zum Beitrag

Wie lasse ich ein Bild in CSS einem DIV-Element überlappen?

Hallo,

ich veranstalte bald eine Reihe von Gewinnspielen anlässlich des 10-jährigen Bestehens. Über die volle Breite des Bildschirms soll am unteren Rand fixiert eine Leiste zu sehen sein, mit der man schnell per Klick zum Gewinnspiel kommt.

Links im DIV soll ein Bild von einem Luftballon zu sehen sein, der dann sozusagen über dem DIV "schwebt"; also die Styles des DIVs nicht übernimmt, sondern transparent einfach darüber liegt.

Ich habe jetzt folgenden Codepen: https://codepen.io/gooloonetwork/pen/KKvXoMO

Aber irgendwie sieht man das Bild nicht. Hat jemand einen Tipp, wie ich es hinbekomme, dass das Bild zu sehen bleibt (und vielleicht auch eine Idee, wie sich Bild und Text nicht beißen, also der Text aus dem ersten DIV nicht aus Versehen in den Hintergrund des Bilds schwappen)?

...zum Beitrag

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zum Beitrag

Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen