बीच में शब्दों के साथ एक क्षैतिज रेखा के लिए सीएसएस तकनीक

Question

मैं बीच में कुछ पाठ के साथ एक क्षैतिज नियम बनाने की कोशिश कर रहा हूं। उदाहरण के लिए:

----------------------------------- मेरा शीर्षक यहाँ ------------ -----------------

क्या सीएसएस में ऐसा करने का कोई तरीका है? बिना सभी "-" स्पष्ट रूप से डैश।

Comments

क्या यह किसी formटैग के अंदर है ?

— बारात

उस मामले में, जैसा कि तीसवाँ ने मेरे उत्तर के उत्तर में बताया है, आप तत्वों fieldsetऔर legendतत्वों को देखना चाह सकते हैं

— Stephan Muller

stackoverflow.com/a/25691518/379855

— डोनल

पारदर्शी पृष्ठभूमि पर समाधान के लिए , पारदर्शी पृष्ठभूमि पर केंद्रित पाठ से पहले और बाद में रेखा

— वेब-टिकी

देखें stackoverflow.com/a/26634224/465233

— MatTheCat

Answer 1

यह मोटे तौर पर मैं यह कैसे करूंगा: लाइन को एक सेट border-bottomपर सेट करके बनाया जाता है और h2फिर h2एक छोटा दिया जाता है line-height। पाठ को spanगैर-पारदर्शी पृष्ठभूमि के साथ नेस्टेड में डाल दिया जाता है ।

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

मैंने केवल क्रोम में परीक्षण किया है, लेकिन इसका कोई कारण नहीं है कि इसे अन्य ब्राउज़रों में काम नहीं करना चाहिए।

JSFiddle: http://jsfiddle.net/7jGHS/

Comments

यह मेरा पसंदीदा उपाय है। यह OSX पर भी काम करता है और कुछ अन्य न। यदि आप इस समाधान का उपयोग अपने पृष्ठ की पृष्ठभूमि के अनुसार स्पैन की पृष्ठभूमि को उसी रंग में सेट करने के लिए करते हैं, तो यह विशेष रूप से स्पष्ट होगा कि यदि आपकी पृष्ठभूमि सफेद नहीं है तो मेरा क्या मतलब है। ;)

— DrLazer 11

किसी भी तरह से लगभग एक चौथाई रास्ता बनाने के लिए?

— ट्रॉय कोसेंटिनो

"टेक्स्ट-संरेखित करें: बाएँ; पाठ-इंडेंट: 40px;" H2 शैली में।

— मैट__सी

यह लचीला नहीं है, क्योंकि आप पाठ की पृष्ठभूमि का रंग सफेद के रूप में तय करते हैं।

— चाओ

@NateBarbettini जब तक आप यह करने की कोशिश कर रहे हैं और पाठ को इसके पीछे अन्य सामान के लिए पारदर्शी पृष्ठभूमि की आवश्यकता होती है।

— कोबर्न

Answer 2

विभिन्न समाधानों की कोशिश करने के बाद, मैं विभिन्न पाठ चौड़ाई, किसी भी संभावित पृष्ठभूमि और अतिरिक्त मार्कअप को जोड़ने के लिए एक मान्य के साथ आया हूं।

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

<h1>Heading</h1>
<h1>This is a longer heading</h1>

मैंने इसे IE8, IE9, Firefox और Chrome में परीक्षण किया। आप इसे यहां देख सकते हैं http://jsfiddle.net/Puigcerber/vLwDf/1/

Comments

मुझे यह सबसे अच्छा लगता है। एक शैली प्राप्त करने के लिए जहां पाठ बाईं ओर से केंद्रित है बजाय इस उपयोग का उपयोग करें: h1 { अतिप्रवाह: छिपा हुआ; `पाठ-संरेखण: बायां; `पाठ-इंडेंट: 40 पीएक्स; `}

— मैट__ सी

यह वास्तव में एक अच्छा समाधान है; विशेष रूप से यह किसी भी पृष्ठभूमि के साथ काम करता है और शीर्षक तत्व पर एक सेट चौड़ाई की आवश्यकता नहीं है।

— ल्यूक

यह भी खूब रही। मैंने आपके कोड को पाठ को बाएं-संरेखित करने और :afterतत्व को ब्लॉक की चौड़ाई बनाने के लिए अनुकूलित किया । मैं उत्सुक हूं: वास्तव में क्या भूमिका है margin-right: -50%? जब मैं कोड के साथ इधर-उधर लड़खड़ा रहा था, तो उस संपत्ति के गायब होने से सजावट टूट कर दूसरी रेखा पर आ जाएगी। और यहां तक ​​कि जब :after100% चौड़ाई सौंपी जाती है, तब भी मुझे इसे फिट बनाने के लिए 50% के नकारात्मक मार्जिन-अधिकार की आवश्यकता होती है। क्यों?

— बीटल द नेनेटो

जैसा कि मैं इसे समझता हूं, दोनों पक्षों में नकारात्मक मार्जिन को जोड़ने से तत्व दोनों दिशा में खींचता है, इसलिए यह केंद्रित हो जाता है।

— Puigcerber

इस समाधान के बारे में मुझे जो चीजें पसंद हैं उनमें से एक यह है कि यह उन स्थितियों के लिए काम करता है जहां आपको नहीं पता कि पृष्ठभूमि क्या रंग है। आसानी से इस समस्या के लिए अब तक का सबसे अच्छा समाधान।

— जोमो

Answer 3

ठीक है, यह एक और अधिक जटिल है लेकिन यह सब कुछ में काम करता है लेकिन IE <8

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

तत्वों के पूर्ण होने से पहले और बाद में हम एक को बाईं ओर और एक को दाईं ओर खींच सकते हैं। इसके अलावा, चौड़ाई (इस मामले में 40%) बहुत अंदर की पाठ की चौड़ाई पर निर्भर है .. इसके लिए एक समाधान के बारे में सोचना होगा। top: 1.2emपाठ के केंद्र में कम से कम यह सुनिश्चित करता है कि लाइनें अधिक या कम रहें, भले ही आपके पास अलग-अलग फ़ॉन्ट आकार हो।

हालांकि यह अच्छी तरह से काम करने लगता है: http://jsfiddle.net/tUGrf/3/

Comments

ये चतुर हैं, लेकिन मुझे यकीन है कि ओपी यह नहीं चाहता कि यह एक formटैग के अंदर हो । अगर वह करता है, जैसा कि मुझे यकीन है कि आप जानते हैं, वह बस का उपयोग कर सकता है fieldsetऔर legend।

— बत्तीसी

हे, तुम उस बारे में सही हो। हो सकता है कि वैसे भी इसके लिए जाएं, अगर यह काम नहीं करता है .. शब्दार्थ सही नहीं है, लेकिन इस तरह की किसी चीज़ के लिए जावास्क्रिप्ट का सहारा लेने से बेहतर है।

— स्टीफन मुलर

सबसे अच्छा समाधान मैंने पाया कि स्क्रीन के आकार के बिना अच्छी तरह से काम करता है और पाठ की पृष्ठभूमि का रंग निर्धारित किए बिना है jsfiddle.net/vLwDf/268

— जेवियर जॉन

हाँ @ xavier-john, यह मेरा जवाब है ;)

— Puigcerber

Answer 4

सबसे छोटी और सबसे अच्छी विधि:

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}

<span> your text </span>

Comments

आपको एक विवरण जोड़ना चाहिए कि आपका कोड क्या करता है, जब तक कि आप इसे हटाना नहीं चाहते।

— inf3rno

मेरे मामले में लाइन थोड़ी मोटी प्रतीत हुई, इसलिए मैंने एक अलग फ़ॉन्ट परिवार असाइन करके इसे हैक font-family: monospace;किया : ठीक काम किया।

— मिखाइल वासिन

Answer 5

यहाँ फ्लेक्स आधारित समाधान है।

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}

<h1>Today</h1>

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

Comments

पैडिंग कैसे प्राप्त करें?

— सिलार

त्वरित और गंदा, आप एक & nbsp जोड़ सकते हैं;

— क्रिस्मस मार्क्स

मैं दूसरे तत्व का उपयोग करता हूं: <h1><span>Today</span></h1>स्पैन पर मार्जिन / पैडिंग के साथ।

— जेसी बुइटेनहुइस

Answer 6

बाद में (अब) ब्राउज़र, display:flexandd pseudo-elements इसे आकर्षित करना आसान बनाता है। border-style, box-shadowऔर यहां तक backgroundकि श्रृंगार के लिए भी मदद करता है।

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}

<h1>side lines via flex</h1>

Comments

इसके लिए धन्यवाद, बहुत चालाक!

— जिमी ओबोनियो अबोर

बिल्कुल सही, केवल समाधान जो मेरे लिए काम करता था जब पृष्ठभूमि एक छवि थी

— कॉज़हंसन

Answer 7

.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: rgba(0, 0, 0, 0.35);
	margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: rgba(0, 0, 0, 0.35);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 8px;
}

<div class="hr-sect">Text</div>

Answer 8

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

पाठ और रेखा के बीच अधिक स्थान बनाने के लिए एक पैडिंग दें।

उदाहरण: http://jsfiddle.net/tUGrf/

Comments

अच्छा, केवल समस्या यह है कि आपको पृष्ठभूमि को सफेद में सेट करना होगा और इसे पारदर्शी पर सेट नहीं किया जा सकता है।

— Marnix

उस स्थिति में आपको दो लाइनों के साथ काम करना होगा, प्रत्येक तरफ एक। यह एक साफ तरीके से हासिल करने के लिए मुश्किल होने जा रहा है ..

— Stephan Muller

मेरा पसंदीदा तरीका अब तक लेकिन दुर्भाग्य से यह किसी कारण से ईमेल क्लाइंट में काम नहीं करता है (जीमेल मोबाइल और वेब)

— reedwolf

Answer 9

मैं इस सरल सजावट के लिए कुछ समाधानों की तलाश कर रहा हूं और मैंने काफी कुछ पाया है, कुछ अजीब, कुछ जेएस के साथ भी फ़ॉन्ट और ब्ला, ब्ला, ब्ला की ऊंचाई की गणना करने के लिए, फिर मैंने पढ़ा है इस पोस्ट पर एक और से एक टिप्पणी को पढ़ने के thirtydot के बारे में बात fieldsetऔर legendऔर मैंने सोचा कि यह किया गया था।

मैं उन 2 तत्वों शैलियों को ओवरराइड कर रहा हूं, मुझे लगता है कि आप उनके लिए W3C मानकों को कॉपी कर सकते हैं और इसे अपनी .middle-line-textकक्षा में शामिल कर सकते हैं (या जो भी आप इसे कॉल करना चाहते हैं) लेकिन यह वही है जो मैंने किया था:

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

यहाँ की बेला है: http://jsfiddle.net/legnaleama/3t7wjpa2/

मैंने सीमा शैलियों के साथ खेला है और यह एंड्रॉइड में भी काम करता है?) (किटकैट 4.XX पर परीक्षण किया गया)

संपादित करें:

Bekerov Artur के विचार के बाद, जो एक अच्छा विकल्प भी है, मैंने .png base64 छवि को एक .SVG के साथ स्ट्रोक बनाने के लिए बदल दिया है ताकि आप किसी भी रिज़ॉल्यूशन में रेंडर कर सकें और किसी भी अन्य सॉफ़्टवेयर के बिना तत्व का रंग भी बदल सकें :)

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

Answer 10

IE8 और नए के लिए समाधान ...

ध्यान देने योग्य मुद्दे:

का उपयोग करते हुए background-color एक सीमा मुखौटा का सबसे अच्छा समाधान नहीं हो सकता है। यदि आपके पास एक जटिल (या अज्ञात) पृष्ठभूमि रंग (या छवि) है, तो मास्किंग अंततः विफल हो जाएगी। इसके अलावा, यदि आप पाठ का आकार बदलते हैं, तो आप देखेंगे कि सफेद पृष्ठभूमि का रंग (या जो भी आप सेट करते हैं) पाठ को ऊपर (या नीचे) रेखा पर कवर करना शुरू कर देगा।

आप यह भी नहीं करना चाहता "guesstimate" , कैसे व्यापक वर्गों या तो कर रहे हैं, क्योंकि यह शैली बहुत अनम्य और जहां सामग्री की चौड़ाई बदल रहा है एक संवेदनशील साइट पर लागू करने के लिए लगभग असंभव बना देता है।

उपाय:

( देखें JSFiddle )

के साथ एक सीमा "मास्किंग" के बजाय background-color, अपने का उपयोग करेंdisplay संपत्ति का ।

एचटीएमएल

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

सीएसएस

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

पर अपनी font-sizeसंपत्ति रखकर अपने पाठ का आकार बदलें.group तत्व ।

सीमाएं:

• कोई बहु-पंक्ति पाठ नहीं। एकल लाइनें।
• HTML मार्कअप उतना सुरुचिपूर्ण नहीं है
• top.lineतत्व पर संपत्ति का आधा होना चाहिए line-height। तो, यदि आपके पास एक line-heightहै 1.5em, तो topहोना चाहिए -.75em। यह एक सीमा है क्योंकि यह स्वचालित नहीं है, और यदि आप इन शैलियों को अलग-अलग लाइन-हाइट्स वाले तत्वों पर लागू कर रहे हैं, तो आपको अपनी line-heightशैली को फिर से लागू करने की आवश्यकता हो सकती है ।

मेरे लिए, इन सीमाओं ने "उन मुद्दों" को पछाड़ दिया, जिन्हें मैंने सबसे अधिक कार्यान्वयन के लिए अपने जवाब की शुरुआत में नोट किया था।

Comments

क्रोम पर काम करता है। शब्दार्थ और काफी सरल लगता है। बूटस्ट्रैप के साथ काम करता है।

— जेफ एनसेल 15’14

मुझे बॉर्डर-पतन जोड़ना था: .group से अलग, क्योंकि मैं इसका उपयोग उस सक्षम में कर रहा हूँ जिसकी एक अलग सेटिंग है। बहुत अच्छा काम करता है।

— ब्रायन मैकके

Answer 11

यह आपको लाइनों के लिए निश्चित लंबाई देता है, लेकिन महान काम करता है। लाइनों की लंबाई '\ 00a0' (यूनिकोड स्पेस) को जोड़ने या लेने से नियंत्रित होती है।

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}

<h1>side lines</h1>

Answer 12

अगर कोई सोच रहा है कि हेडिंग को कैसे सेट किया जाए ताकि वह बाईं ओर एक निश्चित दूरी के साथ दिखाई दे (और जैसा कि ऊपर प्रस्तुत नहीं किया गया है), तो मुझे लगा कि @ Puigcerber के कोड को संशोधित करके।

h1 {
  white-space: nowrap;
  overflow: hidden;
}

h1:before, 
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
}

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

यहाँ JSFiddle ।

Answer 13

h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

यह आपकी मदद करेगा

लाइन के बीच

Comments

<h6 class = "background"> ​​<span> हमारी सेवाएं </ span> </ h6> यह html कोड है

— डोमिनिक अमल जो एफ

जो, आप HTML कोड को जोड़ने के लिए अपने स्वयं के उत्तर को संपादित कर सकते हैं - टिप्पणियों में डालने से कहीं बेहतर। आपको उत्तर में कुछ स्पष्टीकरण भी जोड़ना चाहिए।

— मोगसद 20

क्षमा करें, मोग्सदाद मैं html कोड डालना भूल गया, इसीलिए मैंने इसे यहाँ रखा।

— डोमिनिक अमल जो एफ

Answer 14

मैं गतिशील रूप से ऊर्ध्वाधर स्थिति के लिए पक्षों को गतिशील रूप से और 0-ऊँचाई, निरपेक्ष स्थिति के लिए भरने के लिए एक टेबल लेआउट का उपयोग करता हूं:

• कोई हार्ड-कोडित आयाम नहीं
• कोई चित्र नहीं
• कोई छद्म तत्व नहीं
• पृष्ठभूमि का सम्मान करता है
• नियंत्रण बार उपस्थिति

https://jsfiddle.net/eq5gz5xL/18/

मैंने पाया कि सत्य केंद्र से थोड़ा नीचे पाठ के साथ सबसे अच्छा लग रहा है; यह समायोजित किया जा सकता है जहां 55%है (लंबी ऊंचाई बार को कम करती है)। जहां है वहां रेखा का स्वरूप बदला जा सकता border-bottomहै।

HTML:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

सीएसएस:

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

Answer 15

एक मरे हुए घोड़े को मारने के लिए नहीं, लेकिन मैं एक समाधान की तलाश कर रहा था, यहां समाप्त हो गया, और खुद विकल्पों से संतुष्ट नहीं था, कम से कम किसी कारण से मैं यहां समाधान प्रदान करने में सक्षम नहीं था मेरे लिए अच्छा काम करने के लिए। (संभवतः मेरी ओर से त्रुटियों के कारण ...) लेकिन मैं फ्लेक्सबॉक्स के साथ खेल रहा हूं और यहां मुझे अपने लिए काम करना है।

कुछ सेटिंग्स हार्ड-वायर्ड हैं, लेकिन केवल प्रदर्शन के उद्देश्यों के लिए। मुझे लगता है कि इस समाधान को किसी भी आधुनिक ब्राउज़र में काम करना चाहिए। बस .flex- पैरेंट वर्ग के लिए तय सेटिंग्स को हटा दें, रंगों / पाठ / सामान को समायोजित करें और (मुझे आशा है कि) आप इस दृष्टिकोण के साथ खुश रहेंगे।

HTML:

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}

<div class="flex-parent">
  <div class="flex-child-edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-edge"></div>
</div>

मैंने यहां अपना समाधान भी सहेजा है: https://jsfiddle.net/Wellspring/wupj1y1a/1/

Answer 16

बस अगर कोई चाहे तो IMHO एक फ्लेक्सबॉक्स द्वारा CSS का उपयोग करने का सबसे अच्छा समाधान है।

यहाँ एक उदाहरण है:

.kw-dvp-HorizonalButton {
    color: #0078d7;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
}
.kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after {
    background-color: #0078d7;
    content: "";
    display: inline-block;
    float:left;
    height:1px;
}
.kw-dvp-HorizonalButton:before {
    order:1;
    flex-grow:1;
    margin-right:8px;
}
.kw-dvp-HorizonalButton:after {
    order: 3;
    flex-grow: 1;
    margin-left: 8px;
}
.kw-dvp-HorizonalButton * {
    order: 2;
}

    <div class="kw-dvp-HorizonalButton">
        <span>hello</span>
    </div>

यह हमेशा लाइन और आपकी सामग्री के बीच एक आसान नियंत्रण मार्जिन के साथ, बाईं और दाईं ओर एक पंक्ति के साथ एक पूरी तरह से केंद्रित गठबंधन सामग्री में परिणाम होना चाहिए।

यह आपके शीर्ष नियंत्रण के पहले और बाद में एक पंक्ति तत्व बनाता है और उन्हें आपके फ्लेक्स कंटेनर में 1,3 ऑर्डर करने के लिए सेट करता है, जबकि आपकी सामग्री को ऑर्डर 2 (मध्य में जाएं) के रूप में सेट करता है। 1 के बढ़ने से पहले / बाद में देने से वे आपकी सामग्री को केंद्रित रखते हुए सबसे खाली जगह का समान रूप से उपभोग करेंगे।

उम्मीद है की यह मदद करेगा!

Answer 17

मुझे यकीन नहीं है, लेकिन आप एक क्षैतिज नियम का उपयोग करने और पाठ को इसके शीर्ष मार्जिन से ऊपर धकेलने का प्रयास कर सकते हैं। आपको अपने पैराग्राफ टैग और एक पृष्ठभूमि पर भी एक निश्चित चौड़ाई की आवश्यकता होगी। यह थोड़ा हैकरी है और मुझे नहीं पता कि यह सभी ब्राउज़रों पर काम करेगा या नहीं, और आपको फॉन्ट के आकार के आधार पर नकारात्मक मार्जिन सेट करना होगा। हालांकि क्रोम पर काम करता है।

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

Answer 18

मैंने सुझाए गए अधिकांश तरीकों की कोशिश की है, लेकिन कुछ समस्याओं जैसे कि पूरी चौड़ाई, या गतिशील सामग्री के लिए उपयुक्त नहीं है। अंत में मैंने एक कोड को संशोधित किया, और पूरी तरह से काम करता है। यह उदाहरण कोड उन रेखाओं को पहले और बाद में खींचेगा, और यह सामग्री परिवर्तन में लचीला है। केंद्र ने भी गठबंधन किया।

एचटीएमएल

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

सीएसएस

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

परिणाम: https://jsfiddle.net/fasilkk/vowqfnb9/

Answer 19

मेरे लिए यह समाधान पूरी तरह से ठीक काम करता है ...

एचटीएमएल

<h2 class="strikethough"><span>Testing Text</span></h2>

सीएसएस

.strikethough {
 width:100%; 
 text-align:left; 
 border-bottom: 1px solid #bcbcbc; 
 overflow: inherit;
 margin:0px 0 30px;
 font-size: 16px;
 color:#757575;
 }
.strikethough span {
 background:#fff; 
 padding:0 20px 0px 0px;
 position: relative;
 top: 10px;
}

Answer 20

जो लोग बूटस्ट्रैप 4 का उपयोग कर रहे हैं वे इस विधि से प्राप्त कर सकते हैं। HTML कोड में उल्लिखित कक्षाएं बूटस्ट्रैप 4 से हैं।

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

और अपना HTML इस तरह से लिखें

<div class="d-flex flex-row align-items-center">
  <h1><span> Title </span> </h1>
</div>

Answer 21

बीच में शब्दों के साथ क्षैतिज और ऊर्ध्वाधर रेखा

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: red;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: red;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: red;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: red;
    display: block;
    height: 50%;
}

<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

इसका उत्तर https://stackoverflow.com/a/57279326/6569224 पर भी है

Answer 22

• रंग की एकल डॉट # e0e0e0 के साथ छोटी छवि 1x18 बनाई गई
• छवि को बेस 64 कोड में बदल दिया

परिणाम:

body
{
  background: #c0c0c0;
}

#block_with_line
{
  width: 100%;
  position: relative;
  height: 18px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA4ODg8vF4+wAAAAJ0Uk5TAP9bkSK1AAAAEElEQVR4nGNgQAMN6AIMDAAJpACBAQttyAAAAABJRU5ErkJggg==');
}

#block_with_line span
{
  background: #e4e4e4;
  width: 150px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  text-align: center
}

<body>
  <div id="block_with_line">
    <span>text</span>
  </div>
</body>