Text im Div Container lässt sich nicht vertical middel'n

Waterfront_xD · 16. Mai 2014

Hey,

ich habe das problem, das ich den Text im Div Container zwar mit text-align:center; schon in die mitte horizontal bekomme aber mit
vertical-align:middle; geht das nicht also es passiert nix

HTML

<div id="banner"><font size="12">Der kleine Hase</font></div>

Code

#banner{
width:80%;
float:right;
background: rgb(181,189,200); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(40,52,59,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-align:center;
vertical-align:middle;
height:120px;
}

Alles anzeigen

Dann hab ich im Netz gelesen man soll das als table-cell machen, das sieht dann so aus:

HTML

<div id="banner" class="container"><font size="12px">Der kleine Hase</font></div>

Code

.container{
min-height: 10px;
display: table-cell;
vertical-align: middle;
}
#banner{
width:80%;
float:right;
background: rgb(181,189,200); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(181,189,200,1)), color-stop(36%,rgba(130,140,149,1)), color-stop(100%,rgba(40,52,59,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-align:center;
height:120px;
}

Alles anzeigen

Beides funzt nicht, aber irgendwie muss ich doch den Text nach unten in die Mitte bekommen

LG
Waterfront

threadi · 16. Mai 2014

Die anderen Hilfen reichen dir wohl nicht?
http://www.html.de/threads/tex…rieren.52214/#post-357626

Waterfront_xD · 17. Mai 2014

Anscheinend sind in dem Forum "Neulinge in dem Thema" falsch, so höflich wie mir dort geantwortet wurde.

Bandit · 17. Mai 2014

Was hat das mit höflich zu tun? Du hast dort behauptet, dass du mit google nichts gefunden hast. Dir ist das bewiesen worden, dass man mit google sehr wohl Lösungen finden kann.
Du darfst nicht vergessen, dass die meisten Helfer sich schon seit Jahren mit HTML/CSS/PHP etc. beschäftigen und sehr wohl wissen, was man mit google leicht finden kann oder auch nicht. Da sind dann Aussagen wie "ich habe mit google gesucht" relativ schnell entlarvt.

Auszug aus den Forenregeln:

Zitat

Inhalt von Beiträgen:
[FONT=Verdana, Arial, Helvetica, sans-serif]Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
Verboten oder auch unerwünscht sind folgende Inhalte: [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]extrem politisch oder religiös orientierte Postings [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Warez oder fremde copyrightgeschütze Werke [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]E-Mail Adressen [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Songtexte [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen) [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen[/FONT]

Waterfront_xD · 17. Mai 2014

Ich habe nicht behauptet ich habe nichts gefunden im Netz... Lies dir mein ersten Post durch:

Zitat

ich hab das mit text-align:center probiert aber dann ist der Text nur horizontal mittig ...
dann bin ich im netz auf vertical-align:center; gestoßen ... mhh verändert nix

(vertical-align:center; ist falsch müsste heißen vertical-align:middle; -> trotzdem hat sich der Text nicht vertikal gemittelt)

/edit: Problem hat sich mittlerweile erledigt, im anderen Forum gibt es dann doch nette Menschen.

Tags