nicht angemeldet T-Rex
Matthias Apsel
T-Rex
Matthias Apsel
T-Rex
JürgenB
T-Rex
T-Rex
Moin,
ich würde gerne ein größeres Element in einem kleineren Element mittig positionieren (vertikal und horizontal). Damit es nicht so einfach wird, weiß ich nicht wie groß das innere Element ist.
Beispiel: http://jsfiddle.net/GfV5p/
Bei dem Beispiel habe ich ein img gewählt, damit man etwas sieht. Bei meinem Code handelt es sich jedoch um eine Box mit diversen Inhalten.
Gruß
der komplizierte
T-Rex
Hallo,
um dir konkret helfen zu können sind deine Informationen leider zu mager. Was soll wir dir ein Bild zentrieren, wenn du eine Box mit Text zentrieren willst? Konkrete Inhalte sind erfahrungsgemäß immer besser als Lösungshilfe geeignet.
Und wie soll zum Beispiel die Anzeige auf Tablets oder Smartphones sein?
Was mit Responsive Design?
Welche HTML- und CSS-Version benutzt du?
Für allgemeine Hilfen kannst du auch googlen. Ähnliche Anfragen werden fast jeden Tag in einem Forum gestellt.
Gruss
MrMurphy
Om nah hoo pez nyeetz, T-Rex!
ich würde gerne ein größeres Element in einem kleineren Element mittig positionieren (vertikal und horizontal). Damit es nicht so einfach wird, weiß ich nicht wie groß das innere Element ist.
Was zum lesen - Vielleicht ist es hilfreich.
http://wiki.selfhtml.org/wiki/FAQ/zentrierte_Inhalte
http://wiki.selfhtml.org/wiki/Clip
Matthias
Nein leider nicht.
Die ganzen Punkte (auch die im Internet) gehen immer davon aus, dass das innere Element kleiner oder gleichgroß ist. Und aufgrund der Dynamischen Größe kann ich es nicht mit Position absolute versetzen.
Gruß
WM Faultier
T-Rex
Om nah hoo pez nyeetz, T-Rex!
Die ganzen Punkte (auch die im Internet) gehen immer davon aus, dass das innere Element kleiner oder gleichgroß ist. Und aufgrund der Dynamischen Größe kann ich es nicht mit Position absolute versetzen.
Oft ist es dann so, dass man völlig neu beginnen sollte. Kannst du was relevantes zeigen? Vielleicht ist dein Lösungsansatz schon nicht zielführend?
Matthias
Oft ist es dann so, dass man völlig neu beginnen sollte. Kannst du was relevantes zeigen? Vielleicht ist dein Lösungsansatz schon nicht zielführend?
Was relevantes kann ich leider nicht zeigen :(.
Das Problem ist aber relativ simple - wie beschrieben.
Aber ich denke du hast recht. Vielleicht verwerfe ich nochmals alles und fang das Problem mit ein paar Tagen abstand von vorne an.
Gruß
verzögernder
T-Rex
Hallo T,
ich habe das Zentrieren mit display:table etc. gelöst:
http://www.j-berkemeier.de/Wann_und_wo.html
Es geht um das DIV mit der id="beschreibung". Schau es dir mal an, vielleicht ein Ansatz für dich.
Gruß, Jürgen
Hallo,
ich habe das so verstanden, das ein größeres Element (z. B. eine Grafik mit 600 x 400px) in einem kleineren Element (z. B. einen div mit 500 x 300px) liegt. Die Grafik soll nun zentriert angezeigt werden.
Allerdings sind mit die Begleitumstände noch nicht klar geworden. Z.B. ob der nicht sichtbare Teil angezeigt oder abgeschnitten werden soll.
Der Sinn erschließt sich mir auch noch nicht. Aber T-Rex scheint Gefallen daran zu haben, diejenigen, die ihm helfen wollen, darüber im Dunklen zu lassen.
Wahrscheinlich müssen wir ihm dankbar sein überhaupt antworten zu dürfen.
Gruss
MrMurphy
ich habe das so verstanden, das ein größeres Element (z. B. eine Grafik mit 600 x 400px) in einem kleineren Element (z. B. einen div mit 500 x 300px) liegt. Die Grafik soll nun zentriert angezeigt werden.
Du hast das Problem zu 100% verstanden!
Allerdings sind mit die Begleitumstände noch nicht klar geworden. Z.B. ob der nicht sichtbare Teil angezeigt oder abgeschnitten werden soll.
Ich denke das ist das geringste Problem. Wenn das größere Elment erstmal zentriert ist kann man mittels overflow:hidden die Sache wohl sehr einfach abschneiden. Das hat aber mit dem eigentlichen Problem nix zu tun. Die Rahmenfarbe oder die Schriftgröße spielen ja auch keine Rolle.
Der Sinn erschließt sich mir auch noch nicht.
Der Sinn steckt im Problem - eine Zentrierung.
Gruß
König
T-Rex, der entscheidet wann wer antworten darf
Sooo... also das Problem habe ich wie beschrieben nicht lösen können. Dafür bräuchte man die Größe des Elternelementes (klein) und die eigene Größe als Variable. Das hat man in css natürlich nicht.
Ist jedoch die eigene Größe des Elementes bekannt kann man die css calc funktion zu Hilfe nehmen:
img
{
position: absolute;
width: 240px;
left: calc(( 100% - 240px ) / 2);
}
Die 100% beziehen sich auf das Mutter Element.
Das funktioniert einwandfrei. Muss mal gucken ob eine Absolute Größe bei mir funktionieren würde.
Hab noch nicht Browser übergreifend getestet, im Chrome funktioniert es.
Gruß
Tüfftler
T-Rex
