सीएसएस वर्ड में टेक्स्ट को संरेखित करें

Question

मैं अपने शीर्षलेख में पाठ को लंबवत रूप से संरेखित करने की कोशिश कर रहा हूं, और मुझे कुछ परेशानी हो रही है। संलग्न है मेरी प्रारंभिक बिंदु की एक छवि:

हैडर 141px का एक सेट ऊंचाई है और कहा कि शीर्ष लेख में सब कुछ बीच में सही होना चाहिए। यहां तक ​​कि "वेबसाइट का नाम यहां", इसलिए यदि वह नाम बदलता है और केवल 1 लाइन लेता है, या शायद 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> 

सीएसएस:

#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

मुझे लगता है यह है आप क्या देख रहे हैं, 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> 

हो सकता है कि आप के आसपास कुछ और एक या दो टैग को खत्म करने की बेला कर सकते हैं:

मार्कअप की तरह हो जाएगा।

आईई 8, आईई 9, ओपेरा 11.50, सफारी 5.0.5, एफएफ 5.0, क्रोम 12.0 में विन 7 पर परीक्षण किया गया। मुझे it is also possible to work in IE7 पता है, लेकिन इसे कुछ ट्यूनिंग की आवश्यकता है। T.b.c.

Answer 2

एक महान विधि है। शीर्ष लेख div के अंदर एक div बनाएँ और यह निम्नलिखित शैली दे:

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

और यकीन है कि शीर्ष लेख div

position:relative; 

है और उसे innerdiv अंदर अपने सभी सामग्री डाल