CSS Căn chỉnh theo chiều dọc văn bản trong tiêu đề

Question

Tôi đang cố sắp thẳng hàng văn bản trong tiêu đề của mình và đang gặp một số sự cố. Kèm theo là một hình ảnh của điểm khởi đầu của tôi:

Phần header có chiều cao bộ 141px và tất cả mọi thứ trong tiêu đề đó nên ngay ở giữa. Ngay cả "Tên trang web tại đây", vì vậy nếu tên đó thay đổi và chỉ chiếm 1 dòng hoặc có thể là 3 dòng, tất cả sẽ ở cùng một vị trí.

Lưu ý: Điều này dành cho nhiều trang web đang được tạo động nên đó là lý do tại sao tôi không thể định vị nó bằng margin-top vì tên sẽ khác nhau, một số có thể mất vài dòng và một số có thể chiếm nhiều dòng.

---

Tôi đã cố gắng sắp xếp theo chiều dọc từ những gì tôi đã tìm kiếm trực tuyến vì không có gì hoạt động nên đây là mã từ điểm xuất phát của tôi.

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

Cảm ơn bạn!

Answer 1

Tôi nghĩ rằng đây là những gì bạn đang tìm kiếm, xem demo fiddle.

Các đánh dấu sẽ trở thành như:

<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> 

lẽ bạn có thể fiddle xung quanh một số chi tiết để loại bỏ một hoặc hai thẻ.

Được thử nghiệm trên Win7 trong IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Tôi biết it is also possible to work in IE7, nhưng nó cần một số điều chỉnh. T.b.c.

Answer 2

Có một phương pháp tuyệt vời. Tạo một div bên trong div header và cung cấp cho nó phong cách sau đây:

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

Và chắc chắn rằng div header có

position:relative; 

Và đặt tất cả nội dung của bạn trong innerdiv