Frage CSS: Div mittig platzieren

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

martinfre

Neues Mitglied
27 Juni 2014
11
0
1
36
Hallo zusammen,

seit Ewigkeiten bastel ich wieder an einem kleinen Template und habe meine Probleme mit dem CSS. Es geht um folgenden Code:

HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>123</title>
        <style>
            body {
                width: 100%;
                padding: 0;
                margin: 0;
                color: #383838;
                font-family: "Lato", sans-serif;
                font-size: 100%;
                line-height: 1.6;
            }
            .website-wrapper {
                width: 100%;
            }
            .header {
                width: 100%;
            }
            .header-wrapper {
                width: 100%;
                position: fixed;
                background: aqua;
                max-width: 1300px;
                margin: 0 auto;
                padding: 0 2em;
                box-sizing: border-box;
            }
            .header-logo-wrapper {
                float: left;
            }
            .header-nav-wrapper {
                float: right;
            }
            .header-nav {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                width: 100%;
            }
            .header-nav li {
                float: left;
            }
            .header-wrapper a {
                display: block;
                text-decoration: none;
                text-transform: uppercase;
                color: #383838;
                padding: 1em;
            }
        </style>       
    </head>
    <body>
        <div class="website-wrapper">
            <header class="header">
                <div class="header-wrapper">
                    <div class="header-logo-wrapper">
                        <a href="#">|Logo|</a>
                    </div>
                    <div class="header-nav-wrapper">
                        <ul class="header-nav">
                            <li>
                                <a href="#">LinkEins</a>
                            </li>                       
                            <li>
                                <a href="#">LinkZwei</a>
                            </li>
                            <li>
                                <a href="#">LinkDrei</a>
                            </li>
                            <li>
                                <a href="#">LinkVier</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>
            <main class="main">
                <div class="main-wrapper">
                    <section class="atmo">
                    </section>
                </div>
            </main>
            <footer class="footer">
                <div class="footer-wrapper">
                </div>
            </footer>
        </div>
    </body>
</html>
Warum bekomme ich "header-wrapper" nicht mittig platziert? Funktionierte das nicht eigentlich mit fester Breite und "margin: 0 auto;"?

Vielen Dank schon mal für Eure Hilfe.
 

Sailor

Aktives Mitglied
14 Juli 2017
472
58
28
Funktionierte das nicht eigentlich mit fester Breite und "margin: 0 auto;"?
Im Prinzip ja - aber nur, wenn man zwischendrin nicht mit 'position: fixed' und 'float' arbeitet.
Teste mal folgendes CSS:
CSS:
            .header {
                width: 100%;
                position: fixed;
            }
            .header-wrapper {
                width: 100%;
                background: aqua;
                max-width: 1300px;
                margin: 0 auto;
                padding: 0 2em;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
            }
            .header-logo-wrapper {
            }
            .header-nav-wrapper {
            }
 
Werbung: