Versuche schon seit geraumer Zeit ein Bild in der Mitte meiner Seite zu plazieren. Habe zu diesem Zweck folgenden Stil erstelllt, mit dem das Bild in der Mitte von body in den Hintergrund befördert werden soll. Das Bild landet aber immer an der oberen Kante und ist zur Hälfte durchgeschnitten? Was mache ich falsch?
Unbenanntes DokumentHTML Code bitte zwischen HTML und /HTML in eckigen Klammern eingeben.
Im Editor ist da so ein <> Icon.
Ich verstehe Dich nicht ganz. Es handelt sich doch um einen Stil, der immer zwischen und eingegeben werden muss? Damit steht er doch auch zwischen und . Habe den Code übrigens mit dem dreamweaver erstellt.
Er meinte die Code-Tags hier im Forum. Du solltest HTML-Quelltext mit dem <>-Button kennzeichnen.
Zum Problem:
Wenn du ein Bild einfügen möchtest und dieses Teil des Inhalts ist, dann nutzt du den -Tag, wenn du einen Hintergrund einfügen möchtest und es Teil des Designs ist, dann nutzt du die background-Eigenschaft in CSS.
Bild oder Hintergrund?
Ja, sorry. Meinte es hier im Forum, der Übersichtlichkeit wegen.
Hast du es mit margin: 0; und text-align: center; versucht?
PS. Ach, so meinst du das.
Sollte vielleicht eine Hilfe sein:
CSS-Tipps / Element genau in der Mitte des Browserfensters zentrieren - Homepage-Total.de
Besonders dieser Teil:[FONT=monospace]
[/FONT]position: absolute;[FONT=monospace]
[/FONT]left: 50%;[FONT=monospace]
[/FONT]top: 50%;
Das body Bild vielleicht noch in eine Klasse packen.
body img {
…
}
Also ich will einfach ein Bild in der Mitte(horizontal wie vertikal) des Bidschirms platzieren. Wenn ich das img-tag nehme, dann finde ich keine Einstellung, mit der ich das Bild in dieser Weise platzieren kann. So weit ich sehe, müsste ich mühsam die gewünschten Abstände im browser ablesen und eingeben. Deswegen bin ich auf die Idee gekommen, mein Bild in die Mitte des Hintergrundes -aber als Teil desselben- zu stellen, weil css für den Hintergrund die Eigenschaft center, center zur Verfügung stellt.Wie dem auch sei, vielleicht kann mir einfach jemand den Code hinschreiben, mit dem ich ein Bild in die Mitte des Bildschirms stellen kann. Ich danke im voraus für Eure Geduld.
Dein Beitrag hat sich mit meinem überschnitten. text-align:center hab ich versucht, bringt aber nur horizontal das Bild in die Mitte. Den zweiten Teil Deines Vorschlages hab ich noch nicht getestet.
Das Ganze als Hintergrundbild zu zentrieren sollte damit gehen:
html, body { height: 100%; }
body {
background-image: url(DSC00010.bmp);
background-repeat: no-repeat;
background-position: center center;
}
Ich würde btw. kein Bitmap für sowas verwenden. Im Web sind GIF, JPEG oder PNG üblich.
Danke threadi, das hat es tatsächlich gebracht.
Verstehen tu ich es trotzdem nicht. Warum dem html-tag überhaupt ein stil (height) zuordnen?
Trotzdem hätte ich noch eine Nachfrage:
Ich habe gelesen, dass man das Problem folgendermaßen lösen könnte:
- Ein div einfügen und in das div das Bild einfügen.
- Eine Klasse erstellen und diese Klasse dann dem div- container zuordnen.
Leider enthält das schlaue Buch keinen Hinweis, welche Eigenschaften in der class die Zentrierung bewirken sollen? Für etwas Nachhilfe wäre ich dankbar.
Warum suchst du einen workaround, wenn du doch schon eine Lösung hast?
Weil ich am Lernen bin. Und behalten kann man nur etwas, das man verstanden hat. Wenn ich ein Bild in einen container zentral einfügen will(diesmal nicht als Hintergrund), müsste es dafür doch eine einfache Lösung geben?
Ja, absolute Positionierung des Bildes..bild{
position: absolute;
width: 400px; // Breite
height: 400px; // Höhe
left: 50%;
top: 50%;
margin-left: -200px; // Hälfte der Breite des Bildes in Pixel negativiert
margin-top: -200px; // Hälfte der Höhe des Bildes in Pixel negativiert
}
[Hierbei hat das Bild die Klasse „bild“]
[HTML]
[/HTML]Das hat das Bild zerrrissen und in die linke obere Ecke befördert.
So jetzt habe ich die Lösung hier im board gefunden: http://www.html.de/html-und-xhtml/5092-bild-horizontal-und-vertikal-der-mitte-zentrieren.html
Eine einfachere Lösung, die für alle Bildgrößen geht, gibt es offensichtlich nicht.
Die Werte müssen natürlich an das Bild angepasst werde, ausserdem müssen die left und top Eigenschaften vorhanden sein, wenn du das bild in der mitte haben möchtest.
Danke Vitus, Deine message hat sich wohl mit meiner überschnitten.