|
|||
divs vertikal zentriert ausrichten (Formular)
Hallo zusammen,
ich habe ein typisches Formular mit einigen Zeilen. Links Beschreibung, rechts Eingabefeld. Ich möchte das ganze jetzt in den jeweiligen Zeilen vertikal zentriert ausgerichtet haben, aber leider habe ich dafür keine Lösung finden können. Als Beispiel hier ein Fiddle: https://jsfiddle.net/a0w5ofqa/ Habt ihr mir einen Tipp, was man da machen könnte? - Danke schonmal im Voraus! |
Sponsored Links |
|
|||
Hallo
Die Beschreibung (Seminar, Termin Ort u.s.w.) sollte mittels des label-Elements erzeugt werden um eine Verknüpfung mit dem input-Element herzustellen. Unnötige Elemente sollten gelöscht werden. Die Ausrichtung erfolgt dann mittels des Flexbox-Modells: display: flex; Gruss MrMurphy |
Sponsored Links |
|
|||
Danke für deine Antwort!
Ohne DIVs, mit Label und mit Flex sieht es leider noch nicht viel besser aus: https://jsfiddle.net/vda1bszt/ So wie ich das sehe, ist immer noch alles vertikal nach oben ausgerichtet, und den Abstand weiß ich jetzt leider auch nicht, wie man den wieder hinbekommt :-/ Und was meinst du mit "unnötige Elemente sollten gelöscht werden"? |
|
|||
Hallo
Zitat:
Zitat:
Zitat:
Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Formular 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-family: Sans-Serif; font-size: 120%; } body { width: 94%; margin: 1rem auto; } form div { display: flex; flex-wrap: wrap; align-items: center; } form div>* { padding: 0.3rem 0.5rem; margin: 0.5rem; } form div :nth-child(2n+1) { flex: 1 1 30%; } form div :nth-child(2n+2) { flex: 1 1 60%; } } </style> </head> <body> <h2>Senden Sie uns eine Nachricht:</h2> <section> <form id="formular" action="#" method="post"> <div> <!-- autofocus gegebenenfalls löschen --> <label for="seminar">Seminar:</label> <input type="text" id="seminar" name="seminar" autofocus /> <label for="terminort">Termin, Ort:</label> <input type="text" id="terminort" name="terminort" /> <label for="reservierung">Hotelzimmer Reservierung von ... bis ...:</label> <input type="text" id="reservierung" name="reservierung" /> </div> </form> </section> </body> </html> Gruss MrMurphy Geändert von MrMurphy (21.02.2016 um 20:00 Uhr) |
|
|||
Zitat:
Dein arroganter Ton war aber unnötig. Ohne den wärst du echt nett rübergekommen. Schade. |
|
|||
Hallo
Zitat:
CSS3 Flexbox Tipps Tutorial Anleitung Das Modell der flexiblen Boxen CSS Flexible Box Layout Module - verschiedene Beispiele einzelner CSS3-Flexbox-Eigenschaften Videos deutschsprachig: https://www.youtube.com/watch?v=yTkV2_eJox0 https://www.youtube.com/watch?v=hlgsOIPvfdM https://www.youtube.com/watch?v=xyLa...ScbpeX&index=4 Gruss MrMurphy Geändert von MrMurphy (21.02.2016 um 20:29 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren | Alien | CSS | 17 | 20.03.2011 11:23 |
Wie kann ich Text innerhalb eines DIVs vertikal ausrichten? | neffetshd | CSS | 9 | 22.11.2010 08:57 |
Bild vertikal zentriert in einem <div> ausrichten | wolfgke | CSS | 3 | 07.09.2006 17:12 |
Vertikal zentriert ausrichten ... | neurologic scientist | CSS | 4 | 03.08.2006 16:57 |
DIVs innerhalb eines DIV vertikal ausrichten | Hausmeista | CSS | 5 | 21.06.2006 00:50 |