Bild Zentrieren HTML - Forum Für Design, Fotografie & Bildbearbeitung

Có thể bạn quan tâm

Start
Forum Aktuelles Besonderer Inhalt Foren durchsuchen
Tutorials
News

Anmelden Kostenlos registrieren Aktuelles Suche

Suche

Überall Themen Dieses Forum Dieses Thema Nur Titel durchsuchen Von: Suche Erweiterte Suche… Menü Anmelden Kostenlos registrieren App installieren Installieren Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden. Antworten auf deine Fragen: Neues Thema erstellen

Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...

Bild zentrieren HTML D

darkcobalt

Nicht mehr ganz neu hier

Hi Leute. ich habe ein einfaches HTML File mit einem Bild. Wie muss ich den Code abänderen damit das Bild horizontal wie auch vertikal automatisch zentriert angezeigt wird??? CODE////////////// HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TITEL</title> <style type="text/css"> body { background-color: #FFF; } </style> </head> <body> <img src="intro.jpg" width="1440" height="787" usemap="#Map" border="0" /> <map name="Map" id="Map"> <area shape="rect" coords="434,344,558,437" href="http://linkarchiv.de/" target="new" /> </map> </body> </html> als HTML-Code eingefügt - Dobi78 Zuletzt bearbeitet von einem Moderator: 19.01.2015

DJND

Aktives Mitglied

<img src="intro.jpg" width="1440" height="787" usemap="#Map" border="0" align="Center" valign="middle"/> Probier mal ob das so klappt.

owieortho

Aktives Mitglied

DJND schrieb: ...align="Center" valign="middle"... Zum Vergrößern anklicken....

deprecated (veraltet)... Pack Dein Bild in einen DIV-Container mit einem Klassennamen Deiner Wahl und setze im CSS die Breiten- und Höhenwerte auf die gleichen Werte, wie das Bild und die margins auf deren Hälfte. CSS: .dein_klassenname { position: absolute; top: 50%; left: 50%; width: 246px; height: 246px; margin-left: -123px; margin-top: -123px; } hth O.

pixelmaker

jeden Tag neu hier

owieortho schrieb: deprecated (veraltet)... Zum Vergrößern anklicken....

Ich wundere mich immer über die Hellseher hier die ihre Statements abgeben ohne zu wissen was mit dieser HTML Datei geschehen soll. Ich habe gerade wieder mit einer HTML Mailvorlage gekämpft deren Formtierung nur mit Tabellen in Outlook funktioniert. Das ist so was von "veraltet", geht aber nicht anders. grüße ralf

owieortho

Aktives Mitglied

Jo,

wie konnte DJND nur ahnen, dass darkcobalt an einer Emailvorlage arbeitet. Du hast natürlich recht, dass in diesem Fall auf diese Techniken zurückgegriffen werden müsste. Und ich habe so geantwortet, weil ich, vielleicht irrtümlicherweise, vom Einsatz auf einer "normal" verwendeten Datei ausging. Das könnten wir jetzt sicherlich weiter diskutieren, aber ich glaube das braucht's nicht. Ich habe es nicht herablassend gemeint und verzeihe mir, mich beim "Hellseher" ein wenig gewundert zu haben. O. D

darkcobalt

Nicht mehr ganz neu hier

Hi Leute. Danke für eure Hilfe. Es ist keine Emailvorlage sondern soll eine Startseite sein von der weg ich denn auf 4 weitere Wordpress Seiten verlinke. Ich kenne mich mit HTML nicht so gut aus und bin euch sehr dankbar. ich werde das mit css versuchen !!! noch eine frage zu der verlinkung von den 4 WP Seiten. Ich würde eben ein grosses Bild in die Mitte laden und diesem dann so Link Hotspots einzeichnen (Dreamweaver) hinter denn jeweils der Link zur jeweiligen Seite steht. PAsst das so oder ist das auch veraltet bzw. was kann ich tun damit iphone und smartphone diese "startseite" dann auch verstehen? DANKE!!!!!!!!!!! cythux

cythux

Aktives Mitglied

Html5 verwenden und css3 D

darkcobalt

Nicht mehr ganz neu hier

Habs mal adaptiert, will aber noch nicht so recht

HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TITEL</title> <style type="text/css"> body { background-color: #FFF; } .style { position: absolute; top: 50%; left: 50%; width: 246px; height: 246px; margin-left: -123px; margin-top: -123px; } </style> </head> <body> <img src="intro.jpg" width="1440" height="787" usemap="#Map" border="0" /> <map name="Map" id="Map"> <area shape="rect" coords="434,344,558,437" href="http://linkarchiv.de/" target="new" /> </map> </body> </html> Zuletzt bearbeitet von einem Moderator: 20.01.2015 A

Aelfry

Web Developer

darkcobalt schrieb: Habs mal adaptiert Zum Vergrößern anklicken....

nope, hast du nicht - der css code von owieortho muss natürlich noch auf dein Bild angepasst werden: HTML: width: 1440px; height: 787px; margin-left: -720px; /* 50% deiner Bildbreite */ margin-top: -394px; /* 50% deiner Bildhöhe */ Ansonsten musst du deinem image natürlich noch die Klasse zuweisen (die ich btw nicht "style" nennen würde) A

Aelfry

Web Developer

pixelmaker schrieb: Ich wundere mich immer über die Hellseher hier die ihre Statements abgeben ohne zu wissen was mit dieser HTML Datei geschehen soll. Ich habe gerade wieder mit einer HTML Mailvorlage gekämpft deren Formtierung nur mit Tabellen in Outlook funktioniert. Das ist so was von "veraltet", geht aber nicht anders. Zum Vergrößern anklicken....

Es hat nichts mit Hellsehen zu tun, wenn man im Zweifelsfall eher eine moderne Lösung empfiehlt, anstatt unerfahrenen Usern veraltete Techniken zu zeigen. Da im Eingangspost nichts auf irgendeinem Spezialfall hinweist (Email newsletter etc.), ist es nur logisch von einer normalen Website auszugehen. Von daher war der Einwand von owieortho durchaus gerechtfertigt. G

Gelöschtes Mitglied 633957

Guest

Aelfry schrieb: der css code von owieortho muss natürlich noch auf dein Bild angepasst werden [..] Ansonsten musst du deinem image natürlich noch die Klasse zuweisen.. Zum Vergrößern anklicken....

Vielleicht ist es so für einen Anfänger leichter zu verstehen: Code: img.style { /* Deine style-Klasse für das img-Element */ position: absolute; /* Positionierung, gemessen am Rand des nächsthöheren Elements, das nicht position:static ist - absolute verhält sich dynamisch */ left: 50%; /* left u. top: Linke und obere Kante in die Mitte rücken */ top: 50%; /* Die linke, obere Ecke ist nun mittig (horizontal und vertikal) im Browserfenster bzw. body ausgerichtet */ width: 1440px; /* Die Breite in Pixel (px) entspricht der Breite der Grafik */ height: 787px; /* Die Höhe entspricht der Höhe der Grafik */ margin-left: -720px; /* Den Außenabstand um die Hälfte verringern (50% left minus die Hälfte der Grafikbreite) */ margin-top: -393.5px; /* Das Gleiche für die Höhe (Nun ist die Mitte der Grafik in der Mitte des Browserfensters) */ } Im IMG-Tag die Klasse style einbinden, durch class="style": HTML: <img class="style" src="intro.jpg" width="1440" height="787" usemap="#Map" border="0" /> Im AREA-Tag wird das Ziel new angegeben. Ist new ein Kontext-Name eines bestehenden Fensters? Wenn nicht würde ich target="_blank" (Link in neuem Fenster öffnen) oder target="_self" (Link im gleichen Fenster öffnen) verwenden: HTML: <area shape="rect" coords="434,344,558,437" href="http://linkarchiv.de/" target="_blank" /> Es sei denn, Du möchtest mit dem Link, das neue Fenster mit dem Namen new erstellen! Besten Gruß, tynick DJND

DJND

Aktives Mitglied

owieortho schrieb: deprecated (veraltet)... Pack Dein Bild in einen DIV-Container mit einem Klassennamen Deiner Wahl und setze im CSS die Breiten- und Höhenwerte auf die gleichen Werte, wie das Bild und die margins auf deren Hälfte. CSS: .dein_klassenname { position: absolute; top: 50%; left: 50%; width: 246px; height: 246px; margin-left: -123px; margin-top: -123px; } hth O. Zum Vergrößern anklicken....

Sorry, war mir nicht bewusst, dass dies so veraltet ist. Ich lerne aber immer gerne dazu! ;-) D

darkcobalt

Nicht mehr ganz neu hier

Vielen vielen Dank für die tolle Beschreibung nehmen dem Code. So ist es echt verständlich uns funktioniert wunderbar. Zwei Fragen hätte ich noch zum Abschluss. 1) Wie kann ich den horizontalen Scollbalken im Browser deaktiveren? Der erscheint wenn das Fenster zu klein ist und ist unnötig. 2) Wie baue ich in diese kleine einfache HTML Seite jetzt Google Schlagworte und Meta Infos (ich glaube so heisst das) ein damit diese Hauptseite dann auch sogut gefunden wird wie die dahinter verlinkten WordpressSeiten (diese werden toll unter Google gefunden). Was sind da Tricks, MustHaves damit auch seine einfache statische Seite gut verlinkt wird? F

fakerer

Aktives Mitglied

ausblenden kannst du ihn in dem du einfach alles mit CSS: body { overflow: hidden; } ausblendest was außerhalb des Fensters liegt aber warum ist der unnötig wenn das Fenster zu klein ist brauchst du ihn ja um nach unten zu scrollen oder etwa nicht^^ MetaInfos zu mit den meta keywords HTML: <meta name="keywords" content="word 1 word2" /> aber inwieweit die noch bei google ne rolle spielen, oder was aktuell gerade so wie gewertet wird kann ich leider nicht sagen Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren. Antworten Zitate einfügen… Teilen: Bluesky LinkedIn Antworten auf deine Fragen: Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03 Stunden : : 25 Minuten : : 19 Sekunden Zu den Gratis-Inhalten

Neueste Themen & Antworten

E Pfeilspitzen nachträglich ändern
- Letzter: echo
- Gestern um 12:46
Photoshop
D Kann jemand C4D-Dateien aus R11 in R19 öffnen und neu speichern?“
- Letzter: Diefa
- Donnerstag um 15:46
C4D - Allgemein
W Generatives Erweitern funktioniert plötzlich nicht mehr?
- Letzter: wernerdc39
- Dienstag um 14:45
Photoshop
Timecode im Schnittfenster im Format HH:MM:SS
- Letzter: liselotte
- Montag um 21:02
Adobe Premiere
E Realistische Gasflamme
- Letzter: echo
- 14.02.2026
C4D - Texturing, Beleuchtung, Rendering
Wissenschaftliches Arbeiten mit InDesign. Wie kann ich Links vom Literaturverzeichnis korrekt exportieren?
- Letzter: liselotte
- 14.02.2026
InDesign
M Lightroom, Stichwörter in Bilder einfügen
- Letzter: megapascal
- 13.02.2026
Photoshop
Markierung des ganzen Wortes unterbinden
- Letzter: KBB
- 13.02.2026
Affinity – Photo, Designer, Publisher
M Wie drehen Menschen eine Kissenverpackung, um die Rückseite zu sehen? UX‑/Layout‑Frage
- Letzter: maexcleo
- 12.02.2026
Mediengestaltung, Design & Typografie
Überscrollen verhindern
- Letzter: metatron
- 09.02.2026
Affinity – Photo, Designer, Publisher
AnzeigeAiarty Update für natürliche Ergebnisse: TIFF-Export, natürliche Gesichts-Restaurierung & mehr
- Letzter: Stefan
- 09.02.2026
News
M Freistell- und Auswahlwerkzeuge wählen unkontrolliert aus
- Letzter: Mrs. Foto
- 09.02.2026
Photoshop
[CC]Text auf Pfad
- Letzter: Laura1976
- 08.02.2026
Photoshop
P Metadatenstatus in LR 6
- Letzter: Pauline
- 07.02.2026
Lightroom & Raw
Photoshop Elements lässt sich nicht auf WIN 11 64bit installieren
- Letzter: Harald aus RE
- 07.02.2026
Photoshop