✔ DIV-Rahmen mit Images zentrieren

Minimal-Lösungscode für das Zentrieren einer unbekannten Element-/Objektanzahl (<li>) pro Zeile innerhalb der verfügbaren, im vorliegenden Fall, variablen Viewport-Breite (<ul>):

HTML: 
<body>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <!-- ... -->    
    </ul>
</body>
CSS: 
ul 
{
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
    border:#0ff solid 5px
}
 
ul li
{
    display:inline-block;
    width:160px;
    height:100px;
    margin:15px;
    border:lightgray solid 1px;
    background:#f2f2f2
}
 
Zuletzt bearbeitet:
Ich bin inzwischen auf JS umgestiegen, lese die maximale Breite aus, erstelle/berechne mit Math.Floor den Platz passend für x ImageGrids - ohne überschüssigen Freiraum rechts. Beispiel unten müsste noch in ein onChange-Event eingebunden werden)

http://jsfiddle.net/6HWAE/25/

mfg chmee
 
spicelab, ich weiß ich weiß.. Und ja, ul/li ist eine absolut gangbare Lösung. mfg chmee
 
(A) weil ich weiß ;) , dass Du die bessere Lösung nennen kannst (habe also gehofft, dass Du Dich der Sache annimmst) Übrigens hatte ich den Ansatz ja ähnlich, indem ich den Divs per display:inline und center die float-Ausrichtung genommen habe, aber der Fehler im Detail lag. (Beitrag #4)
(der Fehler war lediglich, dass ich nicht inline-block geschrieben habe verbessert) Es gibt dennoch einen Unterschied, die letzte Zeile mit weniger Bildern wird zentriert und aus dem "Gitter" geworfen, während das Beibehalten von float und Nachregeln mit JS das Gitter beibehält.)

(B) ich nenne die JS-Lösung, weil es eine weitere Möglichkeit ist. Nirgends ist geschrieben, dass es nur mit CSS gelöst werden darf. Weil es im CSS-Unterforum ist, schließt andere Lösungen nicht per se aus.

mfg chmee
 
Zuletzt bearbeitet:
@all
Vielen Dank für eure Mühe. Und das am heiligen Sonntag, da bellt direkt der Hund...

Aus den Postings entnehme ich, dass ich mich wohl immer noch nicht ganz eindeutig ausgedrückt habe. Also, was ich eigentlich sagen wollte, war, dass ich eine flexible Ausrichtung der Elemente zentriert in der Horizontalen wollte, d. h. immer dieselben Abstände vom ersten Objekt links und jeweiligen Objekt rechts vom Rand bei einer sich ändernder Windowbreite (je nach Mointor/Usereinstellung...).

spicelab hat in Posting#11 die richtige Lösung gegeben. Und die hatte ich sogar ganz am Anfang auch schon mal, weil "man" so einfach anfängt, aber ich hatte den falschen Doctype verwendet, und so wurde die Boxenhöhe nicht beachtet, was mich dann so verwirrt hat, dass ich vom Weg des Rechten abkam.

Ich habe nun spicelabs leicht geänderte Lösung noch mal unten eingestellt. Wenn man Doctype HTML nimmt, klappt das wunderbar, ich hatte aber XHTML genommen, und da stimmt die Ausrichtung zwar, aber die Boxenhöhe wird einfach nicht beachtet

Vielen Dank noch einmal allen. Problem, na ja, erledigt, Haken dran.

Grüße
Idi


So klappt es (in HTML!):

HTML: 
<!--<!DOCTYPE html PUBLIC %22-//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'>-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
  <head>
  
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Horiontales Zentrieren mir einer variablen Anzahl von Elementen</title>
  
  <style type="text/css">
  ul 
{
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
    border:#0ff solid 5px
}
ul li
{
    display:inline;
    width:160px;
    height:100px;
    margin:15px;
    border:lightgray solid 1px;
    background:#f2f2f2
}
</style>

  </head>
  <body>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>                
        <!-- ... -->    
    </ul>
  </body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück