2017-12-21 141 views
10

सीएसएस: सीएसएस लाइन

.banner-bottom h2 { 
 
    font-size: 2em; 
 
    color: #372568; 
 
    position: relative; 
 
    padding-bottom: 1em; 
 
    text-align: center; 
 
} 
 

 
.banner-bottom h2:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 25%; 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
} 
 

 
.banner-bottom h2:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    right: 25%; 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
}
<div class="banner-bottom"> 
 
    <div class="container"> 
 
    <h2>Special Promo</h2> 
 
    <h2>Promo</h2> 
 
    <div> 
 
     <div>
सेट

परिणाम:

enter image description here

के रूप में नीचे दिए गए उदाहरण लिखने की लंबाई के अनुसार अपनी लाइन CSS में कैसे:

enter image description here

+0

मुझे आपका स्क्रीनशॉट के समान परिणाम दिखाई नहीं दे रहा है। मुझे https://i.stack.imgur.com/2IcrP.png मिलता है। – TRiG

उत्तर

5

inline-block को display संपत्ति के मूल्य की स्थापना के रूप में @Vinothin आप के लिए जवाब है साथ जाने के लिए अच्छा है। यहां एक और चाल है जिसका आप उपयोग कर सकते हैं।

transform संपत्ति का उपयोग पूर्ण स्थिति का उपयोग करते समय आपकी सहायता करेगा।

.banner-bottom h2 { 
 
    font-size: 2em; 
 
    color: #372568; 
 
    position: relative; 
 
    padding-bottom: 1em; 
 
    text-align: center; 
 
} 
 

 
.banner-bottom h2:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    transform: translateX(-100%); 
 
    /* no left value is required */ 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
} 
 

 
.banner-bottom h2:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    /* no right value is required */ 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
}
<div class="banner-bottom"> 
 
    <div class="container"> 
 
    <h2>Special Promo</h2> 
 
    <h2>Promo</h2> 
 
    </div> 
 
</div>

इससे पहले कि आप रिक्ति और शब्द तो बढ़ रही है या इसे कम कर के अनुवाद कर मूल्य के साथ खेलने के बाद की जरूरत है।


transform संपत्ति का उपयोग करके भविष्य में आपको बहुत मदद मिलेगी। मान लीजिए कि आपके पास एक केंद्रित सूची है और आपको आइकन बाएं केंद्र को सूची में स्थानांतरित करने की आवश्यकता है, फिर transform केवल साथ जाने का तरीका चाल करें। मैंने इस चाल को सूचित किया है क्योंकि मुझे पहले भी इसी तरह की समस्या का सामना करना पड़ा है।

आशा है कि इससे मदद मिलती है!

+0

मुझे बहुत मदद करने के लिए धन्यवाद :)) – illogic

+0

यह मेरी खुशी है। –

8

इस प्रयास करें:

.banner-bottom h2 { 
 
    font-size: 2em; 
 
    color: #372568; 
 
    padding-bottom: 1em; 
 
    text-align: center; 
 
} 
 

 
.line:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
    margin: 10px; 
 
} 
 

 
.line:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
    margin: 10px; 
 
} 
 
.promo { 
 
    display: inline-block; 
 
}
<div class="banner-bottom"> 
 
    <div class="container"> 
 
    <h2><span class="line"><span class="promo">Special Promo</span></span></h2> 
 

 
    <h2><span class="line"><span class="promo">Promo</span></span></h2> 
 
    <div> 
 
<div>

+0

'


' ' 'से अधिक उपयुक्त होगा? – Bergi

+0

@ बर्गि: नहीं, क्योंकि [शीर्षक में एक घंटा नहीं हो सकता है] (https://checker.html5.org/?showsource=yes&doc=data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C%3C%21DOCTYPE+html % 3E% 3Ctitle% शीर्षक% + 3 सी% 2Ftitle% 3E% 250A% 3Ch2% 3E% 3Chr% 3E% 3 C% 2Fh2% 3E) में 3E% 26lt% 3Bhr% 3E +। घंटा केवल खंडन विभाजक के रूप में उपयोग किया जाना चाहिए जब सेक्शनिंग तत्वों और शीर्षकों का उपयोग नहीं किया जा सकता है। स्पष्ट कारणों से इसका एक शाब्दिक "क्षैतिज नियम" के रूप में उपयोग को हटा दिया गया है। – BoltClock

+0

@ बोल्टक्लॉक ओह, मैं कैसे याद कर सकता हूं कि यह * शीर्षक * के अंदर रखा गया था। धन्यवाद! – Bergi