• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Absolut positioniertes DIV zentrieren - horizontale Liste

webreader

Neues Mitglied
Hallo Zusamen,

habe das Problem, dass ich den DIV Container nicht horizontal zentriert bekomme.
Besonders schwierig finde ich es, weil die Positionierung auf "absolut" gesetzt bleiben muss.

Danke im Voraus.
Über positives Feedback wäre ich dankbar.

Hier nun der dazu gehörende Code.
HTML:
<html>
<head>
    <style type="text/css">
        html, body { margin:0px; padding:0px;  }
        
        * { margin:0px; padding:0px; }
        
        .so {
            background-color:aquamarine;
            width:auto;
            margin-top:23px;
            left:50%;
            position:absolute;
        }
        
        ul { list-style:none; list-style-type: none; }
        
        ul li {
            height:65px;
            float:left;
            padding-left: 15px;
            padding-right: 15px;
            background-color: deeppink;
            margin-right:20px;
            font-family:Arial,Helvetica, sans-serif;
            line-height: 65px;
            color:yellow;
        }
        
        ul li:last-child { margin-right:0px; }
        
    </style>
</head>
<body>
    <div class="so">
        <ul>
            <li>t1</li>
            <li>t2</li>
            <li>t3</li>
            <li>t4</li>
        </ul>
    </div>

</body>
</html>
 
Werbung:
Werbung:
Hallo

Da fragst du noch? AeSa.

Es ist zwar nicht zu empfehlen, aber siehe mal unter

https://blog.kulturbanause.de/2011/...tionierte-elemente-zentrieren-back-to-basics/

Gruss

MrMurphy

Hat leider nicht funktioniert. Da es sich in meinem Fall um einen DIV mit einer dynamischen Breite, der sich nach dem Inhalt der innenliegenden Liste richtet handelt. In dem Link wird von einer festen breite ausgegangen.
Auch die Variante mit display:table und margin 0 auto, wie in dem Kommentar zu lesen ist, habe ich erfolglos versucht.
 
Hat leider nicht funktioniert. Da es sich in meinem Fall um einen DIV mit einer dynamischen Breite, der sich nach dem Inhalt der innenliegenden Liste richtet handelt. In dem Link wird von einer festen breite ausgegangen.
Für Deinen Code mit dem integrierten Float der <li>-Elemente kommt nicht "Absolut positionierte Elemente zentrieren", sondern die zweite vorgestellte Technik "Gefloatete Elemente zentrieren" zum Tragen, die völlig frei von festen Breiten ist.

Hierfür wird lediglich im HTML-Code noch ein zweites Element zur gegenläufigen Positionierung (left:-50%) benötigt.

JSFiddle-Demo: https://jsfiddle.net/spicelab/r1qh45sf/
 
Zurück
Oben