왼쪽, 오른쪽 및 가운데에 세 가지 요소를 정렬하려고합니다. 가운데 요소 = 동적 폭, 요소 = 브라우저의 너비 포함

Question

다음은 내가 수행하려고 시도한 것입니다. <header> 내에서 <h1> 요소, <time> 요소 및 <div>을 모두 가지고 있는데, 이는 브라우저 창의 전체 너비입니다 . <h1> 요소는 왼쪽에 있어야하며, 너비가 시간과 함께 변경되어야하는 <time> 요소가 중앙에 있어야하고 <div>이 오른쪽에 있어야합니다.

나는 이것을 잠시 동안 작동 시키려고했지만 아무런 운이 없었습니다. 아마도 자바 스크립트가 필요할까요? 또한 필자는 절대 위치 지정을 사용하여 생각할 수 있어야합니다. 수직으로 가운데 정렬하고 모두 다른 글꼴 크기입니다.

을 heres HTML 지금까지 :

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

와 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; 
} 

대단히 감사합니다!

Answer 1

Time은 인라인 요소이므로 헤더를 text-align: center으로 지정하면 시간을 가져올 수 있습니다. 또한 불필요한 inline-block 스타일을 제거하십시오.

그리고 그베이스 배향 스타일 시트 this fiddle example에 수축 :

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

오버플 높은 쪽 플로트 요소의 상기 헤더의 높이를 연장 보장하기 위해 추가된다.