|
|||
Flexbox & Vertikale ausrichtung des Textes
Guten Tag liebe Community,
Ich bin seit ein Paar Tagen an einer Flexbox am arbeiten. Ich habe jedoch ein Problem. Und zwar kann ich den Text nur horizontal ausrichten und nicht vertikal. Ich habe teils nur Text und mal kleine 32x32 bildchen in einer Box daher sind sie unterschiedlich hoch. Und es sieht doof aus wenn der Text oben am Rand ist statt in der mitte der Box. Ich habe schon etliche befehle ausprobiert, ob im CSS vorgegeben oder direkt im HTML. Aber nichts hat geholfen. Das hier ist der CSS Code: Code:
.wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; font-weight: bold; text-align: center; } .wrapper { background: black; color: white; display: flex; text-align: center; flex-flow: row wrap; flex-wrap: nowrap; justify-content: space-between; align-content: flex-start; border:groove 1px #000000; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; } .container { height:flex; min-height:50px; background:black; display:-webkit-flex; display:flex; border:hidden 1px #000000; align-items:stretch; align-content:center; } .Questheader1 { background: black; color: white; width: 50px; } .Questheader2 { background: black; color: white; align-self:auto; flex: 1; } .QuestSzene { background: dimgray; color: white; flex: auto; text-align:center; } .QuestNummer { background: rgba(225,99,71,0.7); width:200px; border:groove 1px #000000; border-top-left-radius:8px; border-bottom-left-radius:8px; text-align:center; } .QuestName { background:palegreen; flex:1 100%; border:groove 1px #000000; text-align:center; } .QuestAufgabe { background:green; flex:1 100%; border:groove 1px #000000; text-align:center; } .QuestBelohnung { background:dodgerblue; flex:1 100%; text-align: center; border:groove 1px #000000; text-align:center; } .QuestBesonderheiten { background:gold; flex:1 100%; text-align:center; border:groove 1px #000000; border-top-right-radius:8px; border-bottom-right-radius:8px; } Code:
<div class="wrapper"> <div class="Questheader1">Quest</div> <div class="Questheader2">QuestName</div> <div class="Questheader2">Aufgabe</div> <div class="Questheader2">Belohnung</div> <div class="Questheader2">Besonderheiten</div> </div> <div class="wrapper"> <div class="QuestSzene">(4) Valhalla-Aufnahmezeremonie ab lvl 1</div> </div> <div class="container"> <div class="QuestNummer">1</div> <div class="QuestName">Text 1</div> <div class="QuestAufgabe">Text 2</div> <div class="QuestBelohnung">Text 3</div> <div class="QuestBesonderheiten">Text 4</div> </div> MFG reyman |
Sponsored Links |
|
|||
Schau mal hier --> Schnelle Treffer mit dem Flexbox-Modell - HTML5 Rocks
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Hallo,
das bestimmt die stelle der Box, aber nicht dessen Inhalt. Mir geht es nur darum den Inhalt der Box (Text/Bilder) Vertikar zu zentrieren. Hier ein ausschnitt.http://prntscr.com/3qc433 Geändert von reyman1988 (07.06.2014 um 01:20 Uhr) |
|
|||
Hallo,
den von Explanator verlinkten Text solltest du schnell wieder vergessen. Das der Text überhaupt nicht nicht auf dein Problem eingeht ist schon mal die eine Sache. Zitat:
Die aktuelle Befehlssyntax kannst du folgendem Text entnehmen: Das Modell der flexiblen Boxen Du suchst wahrscheinlich die Anweisung Code:
align-items: center; MrMurphy Geändert von MrMurphy (07.06.2014 um 11:50 Uhr) |
|
|||
Hallo, vielen dank auch für deine Antwort.
Jedoch nicht die richtige ^^ Dieser Code steht für die Ausrichtung der Items/Boxen. Aber nicht für den Text in der Box. Hier ein ausschnitt.http://prntscr.com/3qc433 Der ausschnitt zeigt ganz gut was ich meine. Ich habe noch ein (hoffentlich) kleines Problem: Und zwar habe ich eine "Transition" eingebaut um eine flüssige Vergrößerung der Box nach unten zu ermöglichen bzw. mehr Inhalt an zu zeigen. Wenn ich kleine Bilder einfüge schimmern diese durch. Das heißt das die anderen Boxen/Items nicht alles andere voll abdecken. >> http://prntscr.com/3qlwbw << hier ein Beispielbild. Geändert von reyman1988 (07.06.2014 um 23:53 Uhr) |
|
|||
Hallo,
du hast recht, ich habe die falsche Anweisung rausgefischt. Du benötigst Code:
justify-content: center; HTML5: Reyman - Text vertikal ausrichten Gruss MrMurphy Geändert von MrMurphy (08.06.2014 um 11:29 Uhr) |
|
|||
Wenn das kleine Bild wo Du den grauen Rand siehst jetzt ganz weg wäre, wie weis der user das da ein Bild sein soll?
Edit fiddle - JSFiddle hab ich das mal in table gesetzt, kannst du nätürlich auch in divs erstellen. Wie Du siehst ist das Bild klein, und beim Hovern wird es groß - aber der user kann sehen dass da etwas ist. |
|
|||
Hi danke für den Hinweis. Ich wollte dort ein kleines Symbol machen damit der User bescheid weiß.
Deine Idee finde ich auch nicht schlecht. Jedoch wollte ich gern bei den flüssigen Übergang bleiben. kann man diesen flüssigen übergang auch in ein td packen statt div ? Wenn es da eine Möglichkeit gibt, wäre das super. Und ich hatte mir auch überlegt die Transition per klick zu machen, jedoch ohne Java keine Lösung gefunden. Und vielen dank für deine Mühe Ich bin auch völlig verblüfft wir kurz das CSS sein kann im Gegensatz zu meinem Code ^^ hier mein bisheriges endresultat: http://jsfiddle.net/reyman/R3t6L/1/ MFG reyman Geändert von reyman1988 (11.06.2014 um 00:49 Uhr) |
Sponsored Links |
|
|||
Ja, das geht genauso wie bei dir.
Zitat:
Javascript --> http://de.wikipedia.org/wiki/Java_%2...iki/Javascript Klick ist ein Ereignis, welches nur mit Javascript ausgewertet werden kann. Es gibt da wohl eine Lösung ohne Javascript aber die ist kompliziert und Bedarf eines Formulareingabeselementes, das eigentlich zur Eingabe gedacht ist. Javascript ist daher das Mittel der Wahl.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Zeilenüberlappung bei margin-top mit negativem Wert | c.weber.os | CSS | 15 | 15.10.2005 16:11 |
des hundes hexenküche | derHund | http://csskueche.xhtmlforum.de/ | 10 | 19.05.2005 23:56 |
Ratschläge bei Publizierung eines fertigen Layouts gesucht | Black Fladder | CSS | 55 | 05.09.2004 15:30 |
div (verschachtelt) und vertikale Ausrichtung | zed leppelin | CSS | 0 | 07.07.2004 11:29 |
Vertikale Zentrierung des Inhalts eines DIV's | menphrad | CSS | 4 | 01.04.2004 13:45 |