CSS 헤더에 세로로 텍스트 맞춤

Question

머리글에 텍스트를 세로로 정렬하려고하는데 문제가 있습니다. 내 시작 지점의 이미지가 첨부 :

헤더는 141px 일련의 높이를 가지고 있으며, 그 헤더에 모든 한가운데에 있어야합니다. "여기 웹 사이트 이름", 그래서 그 이름이 바뀌면 단지 한 줄, 또는 어쩌면 3 줄까지 모두 같은 위치에있을 것입니다.

참고 :이 이름이 다를 수 있기 때문에 난 그냥 margin-top으로 위치 할 수없는 이유는 그래서 동적으로 생성되는 여러 웹 사이트입니다, 일부는 몇 줄을 걸릴 수 있습니다 일부는 다중를 걸릴 수 있습니다 윤곽.

---

나는 수직으로 내 시도를했다 아무것도 그래서이 나의 출발점에서 코드가 작동하지 않기 때문에 내가 온라인 검색 한 내용에서 맞 춥니 다.

HTML :

<div id="header"> 
    <h1>Name of Website Here</h1> 
    <h3>Call Today!<br /><span>(xxx) xxx-xxxx</span></h3> 
    <p>123 Main St.<br />City, State, Zip</p> 
</div> 

CSS :

#header{height:141px;} 
#header h1{float:left;font-size:1.7em;width:200px;text-align:center;line-height:26px} 
#header h3{float:left;text-align:center;color:#e62520;font-size:1.7em;line-height:26px;font-style:italic;margin:0 0 0 95px} 
#header h3 span{font-size:1.2em;} 
#header p{float:right;color:#2a5091;font-size:1.3em;font-style:italic;font-weight:bold;line-height:20px;text-align:right;} 

감사합니다!

Answer 1

내가이 생각 innerdiv 내부의 모든 콘텐츠를 넣어 찾고있는 내용은 demo fiddle을 참조하십시오.

<div id="header"> 
    <span><h1>Name of Website Here</h1></span> 
    <span><h3>Call Today!<br /><span>(xxx) xxx-xxxx</span></h3></span> 
    <div><span><p>123 Main St.<br />City, State, Zip</p></span></div> 
</div> 

은 어쩌면 당신은 하나 개 또는 두 개의 태그를 제거하기 위해 좀 더 주위 바이올린 수 있습니다

마크 업처럼 될 것이다.

IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0에서 Win7 테스트를 마쳤습니다. 나는 it is also possible to work in IE7을 알고 있지만 튜닝이 필요합니다. T.b.c.

Answer 2

아주 좋은 방법입니다. 헤더 DIV 내부 사업부를 만들고 그것을 다음 스타일 제공 :

.innerdiv {height:1px; position:absolute; margin-top:50% } 

을 그리고 헤더 사업부는

position:relative; 

이 있는지 확인하고