मल्टी-लाइन शीर्षक

Question

का आइकन छोड़ा गया है, मैं शीर्षक के बाईं ओर एक आइकन (फ़ॉन्ट भयानक) प्रदर्शित करने की कोशिश कर रहा हूं, जो वर्तमान में काम करता है जब शीर्षक एक पंक्ति पर होता है, लेकिन शीर्षक के दौरान संरेखण गड़बड़ हो जाता है दूसरी लाइन पर चला जाता है।

क्या यह वर्तमान में लगता है कि:

क्या मैं चाहता हूँ:

<div> 
    <h1><i class="fa fa-file-text fa-fw fa-lg"></i>Multi-line Title</h1> 
</div> 

:

यहाँ मैं क्या है का सबसे सरल रूप (fiddle) है

मेरे पास है आइकन को अलग h1 में अलग करने का प्रयास किया, फिर उनमें से प्रत्येक को फ्लोट या इनलाइन डिस्प्ले करें, लेकिन क्योंकि यह मल्टी-लाइन टेक्स्ट है, जिसमें से कोई भी काम नहीं कर पाया है।

इस संरेखण को पाने के लिए मुझे एक साफ तरीका क्या है?

Answer 1

आइकन समस्या का हल पर पूर्ण स्थिति का उपयोग करना इस मामले में इस

div h1 { 
display: inline-block; 
position: relative; 
padding-left: 55px; 
vertical-align: middle; 
} 

div h1 i { 
position: absolute; 
left: 0; 
top: 50%; 
margin-top: -10px; // half height of icon 
} 

Fiddle

Answer 2

जोड़ें। इसके अलावा, शीर्षक टेक्स्ट के साथ संरेखित करने के लिए इसे शीर्ष मार्जिन समायोजित करें।

फिडल: https://jsfiddle.net/0fadtcm7/

div h1 i { 
    position: absolute; 
    margin-left: -55px; 
    margin-top: 3px; 
} 
div h1 { 
    padding-left: 55px; 
} 

Answer 3

पार्टी के लिए देर से एक छोटी सी है, लेकिन अगर किसी और एक ही समस्या हो रही है - इस सीएसएस flexbox के साथ एक आसान ठीक है (जो एक नया ... ish शैली है, लेकिन इस बिंदु से काफी मजबूत समर्थित है)।

(नोट नीचे कोड के लिए:। आप एक <div> में <i> लपेट कर सकते हैं, या कुछ और, यदि आवश्यक हो, लेकिन मैं एक दूसरे <h1> टैग सहित के खिलाफ सलाह देंगे कि के रूप में एसईओ समस्याओं का कारण बन सकता है मूल रूप से, आप .wrapper वर्ग की जरूरत है । दो बच्चों के साथ - चिह्न के रूप में एक (या आइकन से युक्त एक div), और हेडर के रूप में एक)

सबसे पहले, नए HTML:

<div> 
    <i class="fa fa-file-text fa-fw fa-lg"></i> 
    <h1>Multi-line Title</h1> 
</div> 

और नई सीएसएस:

div { 
    display: flex; 
    align-items: center; 
} 

नोट: align-items: center; ऊर्ध्वाधर संरेखण सेट करता है। यह वांछित के रूप में फ्लेक्स-स्टार्ट (टॉप-गठबंधन) या फ्लेक्स-एंड (नीचे-गठबंधन) भी हो सकता है।