IMG in DIV vertikal zentrieren
1 
Matthias Apsel
0 0 Matthias Apsel
0 0 
Gunnar Bittersmann
1 0 1 Gunnar Bittersmann
0 
T-Rex
1 molily
IMG in DIV vertikal zentrieren
Hallo,
wurde wahrscheinlich schon tausendmal angesprochen, aber ich bekomme es gar nicht hin.
Im Beispiel unter http://muskatewitz.info/index.php?&p=10100 soll das Titel-Logo mit dem Namen der Website beim verkleinern der Browser Breite sich irgendwann auch verkleinern. Das Bild bleibt aber leider OBEN und ich bekomme es nicht vertikal zentriert.
Ich habe schon alle mir bekannten Sachen ausprobiert, von vertical align bis zu einer table um das Bild herum. Bei der Tabelle verkleinert sich das Bild nicht mehr.
Hat einer eine Lösung zum direkten Einbau?
$seitenlogo = "".$domain."/images/logobig2.png";
echo "<div id=\"headlogobig\" style=\"left: ".$logowidth."px; top: 0px; right: 0px; height: 93px; position: absolute; text-align: center; z-index: 115; display:table-cell; vertical-align:middle;\">";
echo "<img src=\"".$seitenlogo."\" style=\"max-width:90%; max-height:100%;\">";
echo "</div>\n";
-
Om nah hoo pez nyeetz, Gast!
$seitenlogo = "".$domain."/images/logobig2.png";
echo "<div id="headlogobig" style="left: ".$logowidth."px; top: 0px; right: 0px; height: 93px; position: absolute; text-align: center; z-index: 115; display:table-cell; vertical-align:middle;">";
echo "<img src="".$seitenlogo."" style="max-width:90%; max-height:100%;">";
echo "</div>\n";Vermeide inline-style-Angaben! Verstecke wichtige Dinge nicht in Bildern. ~~~html <header> <h1>Muskatewitz.info<span>seit 2010 by Daniel</span><h1> </header>Style h1 und das span-Element entsprechend. Schau dazu in unser Wiki.
Matthias
-
Und ich habe noch überlegt beim letzten Satz zu schreiben dass ich das PROBLEM LÖSEN WILL und keine andere MEINUNGEN hören will.
Ist doch nicht sooo schwer oder? Ich WILL das Bild Vertikal zentrieren. (Wechselnde Bilder und eine Texte)
Wenn du keine Lösung weisst...Poste keine Pseudo-Antwort!
-
Om nah hoo pez nyeetz, Gast!
Wenn du keine Lösung weisst...Poste keine Pseudo-Antwort!
Wenn du keine Hilfe willst …
Matthias
-
das kannst du doch nicht ernsthaft als HILFE bezeichnen.
Es wurde keine akzeptabel Lösung geschrieben!
Ich möchte das auch auf der Portal-Seite machen...Bilder vertikal Zentrieren.
Wenn ich Feste größenangaben verwende wird hier im Forum ja auch nur gemeckert, jetzt erarbeite ich ein Design das sich an die Größe anpasst und bekomme trotzdem nur blöde Antworten.-
Hallo,
das kannst du doch nicht ernsthaft als HILFE bezeichnen.
Es wurde keine akzeptabel Lösung geschrieben!
Ist aber auch ein SCHEIß-Service hier, gell? Da zahlt man hunderte von Euro für den Support und bekommt nur freche Antworten!
Aber: Du machst das schon richtig. ICHWILLICHWILLICHWILL macht die Leute meist gefügiger.
Viele Grüße
Siri-
Ich frage mich nur immer "wieso geben die leute keine Antworten"...dafür ist das Forum doch auch, zum diskutieren und zum helfen.
Und wenn ich frage "wie kann ich auf FOX Doctor Who gucken", erwartet doch keiner eine Antwort wie "gucke lieber auf Sat 1 CSI", dass hilft nicht weiter.
Früher war selfhtml sehr gut, hilfreiche Antworten etc. aber heute?
-
@@Gast:
nuqneH
dafür ist das Forum doch auch, zum diskutieren
vs.
„dass ich … keine andere MEINUNGEN hören will.“
Finde den Fehler.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
naja dann werde ich halt durch selfhtml dumm sterben...weiß wohl hier auch keiner wie man mein Problem lösen kann ;-)
-
-
-
-
-
@@Matthias Apsel:
nuqneH
Wenn du keine Lösung weisst...Poste keine Pseudo-Antwort!
Wenn du keine Hilfe willst …
Nö, will er/sie nicht.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Wenn du keine Lösung weisst...Poste keine Pseudo-Antwort!
Und wenn's Dir nicht paßt, dann such deine Lösung woanders. Alls ob das so schwer wär...
-
Wenn du keine Lösung weisst...Poste keine Pseudo-Antwort!
Und wenn's Dir nicht paßt, dann such deine Lösung woanders. Alls ob das so schwer wär...Ja, irgendwie habe ich damit grosse Probleme, sonst würde ich ja nicht um hilfe fragen oder?
Der Browser will nicht so wie ich und ich versuche herauszufinden wieso. Ich habe vorher schon gegoogelt und einige Sachen ausprobiert, aber bei meiner Situation gehen diese lösungsvorschläge nicht (wenn ich sie mach).
-
-
Hi,
Ist doch nicht sooo schwer oder?
Es sollte ebenso nicht sooo schwer sein, für das Problem *relevanten* Code zu zeigen.
Du willst ein client-seitiges Problem diskutieren – warum zeigst du uns dann server-seitigen Code?MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/-
<div id="headlogobig" style="left: 130px; top: 0px; right: 0px; height: 93px; position: absolute; text-align: center; z-index: 115;"> <img src="muskatewitz/images/logobig2.png" style="max-width:90%; max-height:100%;"> </div>
-
-
@@Gast:
nuqneH
Und ich habe noch überlegt beim letzten Satz zu schreiben dass ich das PROBLEM LÖSEN WILL und keine andere MEINUNGEN hören will.
Auch wenn du hier als Sockenpuppe auftrittst (was nicht gern gesehen ist): Wenn du in jedem Thread – gleich unter welchem Namen – dasselbe dümmliche Verhalten an den Tag legst, dann kann dir in keinem Thread geholfen werden.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Nur zur Info, wenn du im alten Thread die Test-Seite nochmal öffnest siehst du DASS ICH JETZT % Verwende. Durch euren RAT aber an dem jetzigen Problem hänge.
-
-
-
Lieber Matthias,
an dieser Stelle wollte ich dir mal für deine vielen nützlichen Antworten/Tipps danken, die meine Seite und mein Wissen weiter gebracht haben.
Auch vielen Dank dafür, dass du dich für selfhtml so sehr engagierst! Im Duden steht dein Name bei den Gegenteilen von "pseudo". Du bist echt, autentisch, ehrlich, aufrichtig und vertrauenswürdig!
Ohne dich wäre diese Forum doof.Gruß
Fan-Apselisch
T-Rex
-
-
Hallo,
vertical-align: middle zentriert Inline-Inhalte in einer Zeilenbox. Also müsste vertical-align auf das img angewendet werden, nicht auf das div. Hier ist die Zeilenbox aber nur 16px oder so hoch (siehe http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height@title=line-height), daher klebt das Bild oben.
Wenn das Elternelement eine feste Höhe hat, dann kannst du einfach die line-height auf diese Höhe setzen:
<p> <img …> </p>p { height: 100px; line-height: 100px; } img { vertical-align: middle; }Beispiel:
http://codepen.io/molily/pen/DCEikAnsonsten gibt es noch viele weitere Methoden zur vertikalen Zentrierung, je nach Anwendungsfall:
http://www.vanseodesign.com/css/vertical-centering/
http://designshack.net/articles/css/how-to-center-anything-with-css
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/Mathias
-
Vielen Dank, endlich mal eine nützliche Antwort ^^
jetzt kann ich weiter basteln
-
Obwohl es immer noch nicht so geht wie ich es möchte wenn die Grafik auch kleiner werden soll ^^
naja...erstmal passt, muss ich halt später nochmal gucken ^^
-
