Ich versuche, drei Elemente, auf der linken, der rechten und der Mitte auszurichten. Zentrales Element = dynamische Breite, enthält Element = Breite des Browsers

Question

Hier ist, was ich versuche zu tun: Ich habe ein <h1> Element, ein <time> Element und ein <div>, alle innerhalb einer <header> das ist die volle Breite des Browser-Fensters . Das <h1> Element muss auf der linken Seite sein, das <time> Element, das die Breite mit der Zeit ändert, muss zentriert werden, und das <div> muss auf der rechten Seite sein.

Ich habe versucht, dies für eine Weile auszuarbeiten, aber hatte kein Glück. Vielleicht benötigt es etwas Javascript? Ich muss auch in der Lage sein (ich denke mit absoluten Positionierung?) Vertikal zentrieren sie alle ausrichten, und sie sind alle unterschiedliche Schriftgrößen.

Heres die HTML bisher:

<header> 
    <h1>blahblah.com</h1> 
    <time>THE TIME</time> 
    <div id="controls"> 
     DISPLAY CONTROLS 
    </div> 
</header> 

und die CSS:

* { 
    margin: 0px; 
    padding: 0px; 
} 
header { 
    background: black; 
    color: white; 
    width: 100%; 
    font-family: wendy; 
} 
header h1 { 
    display: inline-block; 
    font-size: 40px; 
    margin-left: 10px; 
} 
header time { 
    font-size: 30px; 
} 
header #controls { 
    display: inline-block; 
} 
#controls p { 
    display: inline-block; 
    font-size: 20px; 
} 

Thank you very much!

Answer 1

Time ist ein Inline-Element, also text-align: center für den Header ist genug, um die Zeit zentriert zu erhalten. Weiter, werden diese unnötigen inline-block Stile los.

Und dann die Basis Ausrichtungsstylesheet schrumpft auf this fiddle example:

header { 
    width: 100%; 
    overflow: hidden; 
    text-align: center; 
} 
header h1 { 
    float: left; 
} 
header #controls { 
    float: right;  
} 

Überlauf auf, dass, um sicherzustellen, hinzugefügt wird der Floats die Höhe des Kopfteils erstreckt, je nachdem, was höchsten ist.