✔ Horizontal & vertikal zentrieren

[Carrear]

Ich habe einen Div-Tag in dem ich ein Bild einfüge. Dieses möchte ich horizontal- sowie vertikal zentrieren. Horizontal hat schon funktioniert, jedoch finde ich nichts zur vertikalen Zentrierung.

 

[deepthroat]

Hi.

Wenn ich dich richtig verstehe möchtest du das Bild also in dem <div> vertikal zentrieren. Wovon hängt denn die Größe des <div>s ab? Im Grunde brauchst du nur für den oberen und unteren Rand vom <img> den gleichen Wert angeben.

Gruß

 

[Carrear]

Das verstehe ich nicht -.- Also die Divgröße ist imemr gleich. Es ist ein div in dem Avatars angezeigt werden und das div an sich soll immer gleich groß sein. Nur eben das Bild darin soll zentriert werden.

 

[deepthroat]

Wovon hängt die Größe des <div>s ab?

Mach einfach mal ein Beispiel fertig und poste es hier rein.

Gruß

/edit: Du kannst dir aber z.B. mal diese Seite (http://www.quirksmode.org/css/centering.html) anschauen, vielleicht hilft das ja schon.

 

[versuch13]

Sagen wir mal dein div hat eine höhe von 100px, dann gibst du ihm eine line-height:100px;


Gruß

 

[Quaese]

Hi,

vielleicht den Avatar als Hintergrundbild des DIVs anzeigen.

<div style="width: 100px; height: 100px; border: 1px solid #000; background: url(avatar.gif) 50% 50% no-repeat;" title="Der Avatar">&nbsp;</div>

Ciao
Quaese

 

[Carrear]

An die letzte Möglichkeit habe ich auch schon gedacht... komishcerweise zeigt er das Bild nicht an wenn ich es mit direktem Pfad angebe. Außerdem müsste ich dann in der CSS Datei PHP nutzen und das wäre seehr kompliziert.

 

[Kipperlenny]

das hier hat mal jemand in einem Thread von mir gepostet:

div.center {
position: absolute;
left: 50%;
margin-left: -350px; /* negative Hälfte von width:700px */
width: 700px;
top: 0;
}

div.center {
position: absolute;
left: 50%;
margin-left: -350px; /* negative Hälfte von width:700px */
width: 700px;
top: 50%;
margin-top: -290px;  /* negative Hälfte von height:580px */
height: 580px;
}

Vielleicht hilfts dir!

 

[Quaese]

Hi,

Du kannst ja eine CSS-Regel definieren, in der alle Angaben gemacht sind, ausser der des Hindergrundbildes. Das
lässt Du mit PHP ins Dokument schreiben - wie Du es mit dem Bild auch gemacht hättest, nur das Du das style-Attribut
änderst.

.avatarDiv{ width: 100px; 
            height: 100px; 
            border: 1px solid #000; 
            background-position: 50% 50%;
            background-repeat: no-repeat;}

Der HTML-Teil könnte wie folgt aussehen:

<div class="avatarDiv" style="background-image: url(<?php echo($strPfadMitBild); ?>);" title="Der Avatar">&nbsp;</div>

Wenn das Bild nicht angezeigt wird, solltest Du mal kontrollieren, ob der Pfad richtig angegeben wurde.
Auch Gross- und Kleinschreibung könnten die Ursache sein.

Ciao
Quaese

 

[Carrear]

@Quaese
Danke, funktioniert einwandfrei. Verstehe zwar nicht, warum es das bild nicht angezeigt hat, wenn ich den pfad absolut und ohne variable angegeben habe, aber jetzt funktioniert es.

In diesem Sinne nochmal Danke dan alle die sich zur Problemlösung eingebracht haben