217

मैं सोच रहा हूँ कि xHTML 1.0 में किसी एक के विकल्प क्या हैं जैसे कि पाठ के दोनों ओर एक पंक्ति बनाने के लिए सख्त है, जैसे:

खण्ड एक
----------------------- अगला भाग -----------------------
खंड दो

मैंने कुछ फैंसी चीजें करने की सोची है:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

या वैकल्पिक रूप से, क्योंकि उपरोक्त में संरेखण (दोनों ऊर्ध्वाधर और क्षैतिज) के साथ समस्याएं हैं:

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

यह भी संरेखण समस्याओं है, जो मैं इस गंदगी के साथ हल:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

संरेखण समस्याओं के अलावा, दोनों विकल्प 'थरथरा' महसूस करते हैं, और अगर आप इसे पहले देखा है और एक सुरुचिपूर्ण समाधान के बारे में जानते हैं तो मैं बहुत अधिक बाध्य होऊंगा।

— ब्रायन एम। हंट
स्रोत

3

यहाँ एक और कोई अतिरिक्त टैग चुनौती के साथ एक धागा है - और एक समाधान! stackoverflow.com/questions/12648513/…

— willoller

1

stackoverflow.com/questions/5214127/… अभी भी सबसे अच्छा समाधान है।

यहाँ एक उपयोगी उत्तर CSS ग्रिड को नियोजित करेगा।

— ब्रायन एम। हंट

एक उत्तर (SCSS) जोड़ा गया है जो लगभग किसी भी तत्व को सेट बैकग्राउंड के बिना डिवाइडर में बदल देता है और सेटिंग की अनुमति देता है: डिवाइडर का रंग और स्ट्रोक शैली (ठोस, बिंदीदार, धराशायी), पाठ की स्थिति (बाएं, दाएं, केंद्र), साथ ही साथ वह वर्ग जो इसे लागू करता है (डिफ़ॉल्ट रूप से .divider)।

— ताओ

वर्तमान फ्लेक्सबॉक्स समर्थन को देखते हुए मुझे लगता है कि मेरा उत्तर कुछ दृश्यता प्राप्त कर सकता है।

— MatTheCat

64

मुझे नहीं पता कि यह पता लगाया गया है लेकिन फ्लेक्सबॉक्स काफी समाधान प्रदान करता है:

<div class="separator">Next section</div>

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

डेमो के लिए http://jsfiddle.net/MatTheCat/Laut6zyc/ देखें ।

आज संगतता इतनी खराब नहीं है (आप सभी पुराने फ्लेक्सबॉक्स सिंटैक्स जोड़ सकते हैं) और यह इनायत से नीचा दिखाती है।

— MatTheCat
स्रोत

इन दिनों फ्लेक्सबॉक्स समर्थन पर सबसे अच्छा जवाब

— akivajgordon

यह एक अच्छा समाधान है

— Smaillns

217

कैसा रहेगा:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
    Section Title <!--Padding is optional-->
  </span>
</div>

स्निपेट का विस्तार करें

इस JSFiddle बाहर की जाँच करें ।

आप इसे उत्तरदायी बना सकते हैं vwया उपयोग कर सकते हैं% ।

— फ्लेचर मूर
स्रोत

2

सटीक शीर्ष मूल्य प्राप्त करना थोड़ा कठिन है। यह बिल्कुल -0.5em नहीं है;

— मित्तर

उत्तम। "उत्तरदायी" भी

— जिमएक्ससी

4

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

— मार्टिन एफपी

उत्तरदायी, पारदर्शी बीजी, चर शैली और विभक्त की ऊंचाई, पाठ की चर स्थिति के लिए मेरा उत्तर देखें । SCSS का उपयोग करके, एक ही परियोजना में विभक्त की एक से अधिक शैली रखने के लिए, एक से अधिक बार चयनकर्ताओं के लिए भी आवेदन किया जा सकता है। किसी के साथ काम करता है font-size।

— ताओ

193

चौड़ाई और पृष्ठभूमि के रंग को जाने बिना इसे हल करने का तरीका निम्नलिखित है:

संरचना

<div class="strike">
   <span>Kringle</span>
</div>

सीएसएस

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

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

डबल लाइन

डबल लाइन बनाने के लिए, निम्न विकल्पों में से एक का उपयोग करें:

1) लाइनों के बीच निश्चित स्थान

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

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

2) लाइनों के बीच कस्टम स्थान

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 5px; /* space between lines */
    margin-top: -2px; /* adjust vertical align */
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

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

SASS (SCSS) संस्करण

इस समाधान के आधार पर, मैंने SCSS को "रंग संपत्ति के साथ" जोड़ा अगर यह किसी की मदद कर सकता है ...

//mixins.scss
@mixin bg-strike($color) {

    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 

    > span {

        position: relative;
        display: inline-block;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: $color;
        }

        &:before {
            right: 100%;
            margin-right: 15px;
        }

        &:after {
            left: 100%;
            margin-left: 15px;
        }
    }
}

उपयोग का उदाहरण:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

— MartinF
स्रोत

यह संस्करण बेहतर काम करता है यदि आप लाइन के लिए एक छवि का उपयोग कर रहे हैं - या कम से कम इसे संपादित करना और उत्तरदायी रहना आसान है

— तहलिवी

बहुत अच्छा काम! क्या आप डबल लाइन बनाने के लिए अपनी विजार्ड्री का उपयोग कर सकते हैं? (अन्यथा, मैं सिर्फ एक छोटी सी दोहराई जाने वाली पृष्ठभूमि की छवि का उपयोग करने का सहारा

— लूंगा

3

महान स्निपेट! धन्यवाद :)

— plong0

2

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

— दिनेश डाभी

1

पहला उदाहरण बस कमाल है! बधाई! इसका सही उत्तर होना चाहिए!

— लुइज़ एडुआर्डो

87

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

JSFiddle

CSS और HTML उपयोग:

.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">CATEGORY</div>

स्निपेट का विस्तार करें

SCSS संस्करण:

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0;

    &:before, &:after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0;
        line-height: 0;
        margin: 0 8px;
    }
}

— सर्व-ज्ञानी
स्रोत

1

सुरुचिपूर्ण समाधान, हालांकि इसमें एक चेतावनी है: यदि कोई पाठ नहीं होगा, तो आपके पास लाइनों के बीच एक अंतर होगा।

— फ़ारसाइड

13

यह इस सूत्र में सबसे साफ समाधान है ईमानदार होने के लिए, बिना किसी पाठ के मुद्दे को अनदेखा नहीं किया जा सकता है क्योंकि आप हमेशा पाठ के साथ विभक्त चाहते हैं।

— रॉबर्ट

51

इसे इस्तेमाल करे:

.divider {
	width:500px;
	text-align:center;
}

.divider hr {
	margin-left:auto;
	margin-right:auto;
	width:40%;

}

.left {
	float:left;
}

.right {
	float:right;
}

<div class="divider">
    <hr class="left"/>TEXT<hr class="right" />
</div>

स्निपेट का विस्तार करें

लाइव पूर्वावलोकन jsFiddle पर ।

— डायोडस - जेम्स मैकफर्लेन
स्रोत

4

यह पूरी तरह से काम करता है और <hr /> का उपयोग करता है इसलिए संभवतः इस उत्तर के साथ क्या गलत हो सकता है? मै कुछ नही कहता।

— किर्बी

4

+1 पृष्ठभूमि के रंग के साथ गड़बड़ करने या अनपेक्षित तरीकों से टैग का उपयोग करने की कोई आवश्यकता नहीं है। एक नकारात्मक पक्ष यह है कि .divider hrचौड़ाई इस बात पर निर्भर करती है कि पाठ कितना लंबा है। सुझाव: .dividerऔर .divider hrचौड़ाई emइकाइयों में निर्दिष्ट की जानी चाहिए । hrचौड़ाई प्राप्त करने के लिए , ( .dividerचौड़ाई का # वर्ण) # 2 का उपयोग करें।

— केल्विन

12

यह सबसे अच्छा समाधान नहीं है। क्या होगा यदि आपके पास पाठ की चौड़ाई के बारे में कोई निश्चितता नहीं है। जब पाठ लंबा होगा तब सब बर्बाद हो जाएगा।

— इवोना ट्रोब्का

यह सबसे अच्छा और सरल उत्तर है

— ha9u63ar

1

यहां 40% गलत है। यदि पाठ अधिक लंबा है, तो यह गलत होगा

— टॉमस्वायर

21

मैं अभी उसी समस्या को लेकर आया हूं, इसे हल करने का एक तरीका है:

<table width="100%">
  <tr>
    <td><hr /></td>
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
    <td><hr /></td>
  </tr>
</table>

यह टेक्स्ट एलिमेंट पर बैकग्राउंड सेट किए बिना काम करता है, यानी इसके बैकग्राउंड के पीछे की परवाह किए बिना यह अच्छा लगेगा।

आप इसे यहाँ आज़मा सकते हैं: http://jsfiddle.net/88vgS/

— रॉबर्ट काजिक
स्रोत

ओपी की समस्या का समाधान नहीं करता है। यह उनके बीच पाठ के साथ दो लाइनें बनाता है। वह एक ऐसी लाइन चाहता है जो टूटे हुए हिस्से के माध्यम से हो और टूटे हुए खंड पर पाठ हो, फिर भी लाइन जारी रहती है।

— द्राकोरत

2

यह वास्तव में ओपी के लिए क्या पूछ रहा है। आप इसे jsfiddle.net/88vgS

— रॉबर्ट काजिक

इसके अलावा, टूटी हुई धारा पर पाठ के साथ एक रेखा टूटी हुई भाग का रास्ता क्या है, अगर उनके बीच पाठ के साथ दो लाइनें नहीं हैं?

— रॉबर्ट काजिक

आपको वहां उपयुक्त TR टैग्स फेंकने चाहिए। मुझे लगता है कि यही मुझे एक पल के लिए उलझन में डाल गया। मैंने मूल रूप से किसी कारण के लिए सोचा था कि यह तीन पंक्तियों पर था, न कि तीन स्तंभों पर। सही मार्कअप शायद मुझे इस तरह से देखने का कारण न बने। भले ही, यह निश्चित रूप से एक व्यावहारिक समाधान है।

— दारकोट

1

लेकिन यह तालिकाओं का उपयोग करता है, यह एक अनुमति नहीं है! ओह, बस मजाक कर रहे हैं। GRIDS का अपना स्थान है, लगभग सभी अन्य GUI XML फ्रेमवर्क इसे पहचानते हैं और हर जगह उनका उपयोग करते हैं (उदाहरण के लिए WPF / XAML)। समाधान साथी के लिए धन्यवाद! यह 3 से अधिक वोटों का हकदार है। मुझे संदेह है कि नफरत की मेज पर लोगों का टकराव हालांकि एक बाधा होगा।

— निकोलस पीटरसन

10

अद्यतन: यह HTML5 का उपयोग करके काम नहीं करेगा

इसके बजाय, अधिक तकनीकों के लिए इस प्रश्न की जांच करें: सीएसएस चुनौती, क्या मैं अधिक HTML शुरू किए बिना ऐसा कर सकता हूं?

मैंने line-height:0अपनी साइट guerilla-alumnus.com के हेडर में प्रभाव पैदा किया

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

एक और अच्छी विधि http://robots.thoughtbot.com/ पर है

वह एक पृष्ठभूमि छवि का उपयोग करता है और एक शांत प्रभाव प्राप्त करने के लिए तैरता है

— willoller
स्रोत

1

मुझे यह पसंद है, यह आपकी साइट पर बहुत अच्छा लग रहा है, लेकिन मैं इसे काम नहीं कर सका (मुझे jQuery के सीएसएस से हस्तक्षेप पर संदेह है)। :( लेकिन यह वास्तव में अच्छा है।

— ब्रायन एम। हंट

मुझे लगता है कि आपका h1 स्पैन को नीचे धकेल रहा है।

— imns

1

यह एक "हैक" है जो DOCTYPE XTHML 1.0 संक्रमणकालीन के लिए अलग-अलग प्रतिपादन व्यवहार को रोजगार देता है। यदि आप DOCTYPE html (HTML5 के लिए) का उपयोग करते हैं, तो यह काम नहीं करेगा।

— पीटर

6

<div style="text-align: center; border-top: 1px solid black">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>

— हॉल्स मज्जलिक
स्रोत

6

यदि आप CSS का उपयोग कर सकते हैं और पदावनत alignविशेषता का उपयोग करने के इच्छुक हैं , तो एक स्टाइल फ़ील्डसेट / लेजेंड काम करेगा:

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

फ़ील्डसेट का उद्देश्य उद्देश्य तार्किक रूप से समूह प्रपत्र फ़ील्ड्स है। जैसा कि विलोलर ने बताया, तत्वों के text-align: centerलिए एक शैली काम नहीं करेगी legend। align="center"पदावनत HTML है, लेकिन यह सभी ब्राउज़रों में पाठ को ठीक से केन्द्रित करना चाहिए।

— ट्रे हंटर
स्रोत

एक विस्तृत विवरण कि मैं किस लिए जा रहा था।

— dclowd9901

मुझे पूरा यकीन <legend>है कि यह एक तत्व blockया inline-blockतत्व के प्रदर्शन लक्षणों पर ले जाता है , क्योंकि यह गद्देदार और हाशिए पर हो सकता है , जिसका मतलब है text-align:centerकि काम नहीं करना चाहिए ...

— dclowd9901

हाँ किंवदंतियों शब्दार्थ के लिए महान हैं - मैं उन्हें रेडियो समूहों को लपेटने के लिए उपयोग करता हूं लेकिन वे कुख्यात हैं

— विलो

मैंने अपना जवाब सही किया। दुर्भाग्य से स्टाइल में कुछ ब्राउज़रों की जिद के कारणlegend , तत्व , align="center"एकमात्र समाधान है जो मुझे मिल सकता है जो मज़बूती से केंद्रों में मिलता है legend।

— ट्रे हुनर

6

बूटस्ट्रैप ग्रिड:

HTML:

  <div class="row vertical-center">
    <div class="col-xs-5"><hr></div>
    <div class="col-xs-2" style="color: white"> Text</div>
    <div class="col-xs-5"><hr></div>
  </div>

सीएसएस:

.vertical-center{
  display: flex;
  align-items: center;
}

— dasfdsa
स्रोत

1

vertical-centerवर्ग नहीं रह गया है बूटस्ट्रैप (4.3.1) में मौजूद है। क्या आप कृपया अपना उत्तर अपडेट करने के लिए कह सकते हैं align-items-center?

— कैमरून हडसन

5

आप सिर्फ स्थिति सापेक्ष का उपयोग कर सकते हैं और माता-पिता पर एक ऊंचाई निर्धारित कर सकते हैं

.fake-legend {
  height: 15px;
  width:100%;
  border-bottom: solid 2px #000;
  text-align: center;
  margin: 2em 0;
}
.fake-legend span {
  background: #fff;
  position: relative;
  top: 0;
  padding: 0 20px;
  line-height:30px;
}

<p class="fake-legend"><span>Or</span>
</p>

स्निपेट का विस्तार करें

— sidonaldson
स्रोत

5

केवल सीएसएस के साथ एक सरल समाधान Heres, कोई पृष्ठभूमि चाल ...

.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }

HTML:

  <div class="center-separator">
    centered text
  </div>

उदाहरण फिडल: https://jsfiddle.net/0Lkj6wd3/

— Yftach
स्रोत

एक उपयोगिता वर्ग की तरह महान और पुन: प्रयोज्य समाधान।

— विग्नेश

3

<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

ईविल हैक ...

— Danu
स्रोत

1

मैं इसे हैक नहीं कहूंगा, लेकिन मैं यह परीक्षण करूंगा कि यह उन सभी ब्राउज़रों में काम करता है जिनका आप समर्थन करना चाहते हैं।

— निक लार्सन

— फ़ील्डसेट

3

एक 2 साल पुरानी पोस्ट को टक्कर दे रहा है, लेकिन यहां बताया गया है कि मैं केवल एक तत्व और CSS का उपयोग करके इन स्थितियों को कैसे देखता हूं।

h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

और यहाँ यह जाँचने के लिए एक फिडेल है: http://jsfiddle.net/sRhBc/ (सीमा से लिए गए Google से यादृच्छिक छवि)।

इस दृष्टिकोण का एकमात्र दोष यह है कि यह IE7 का समर्थन नहीं करता है।

— लजार वकुलोविक
स्रोत

3

महज प्रयोग करें

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }

— अनित गर्ग
स्रोत

2

वाह मेरी पहली पोस्ट भले ही यह एक साल पुरानी हो। रैपर के साथ पृष्ठभूमि-रंग के मुद्दों से बचने के लिए, आप इनलाइन-ब्लॉक का उपयोग एचआर के साथ कर सकते हैं (किसी ने भी स्पष्ट रूप से नहीं कहा है)। पाठ-संरेखण सही रूप से केंद्र होना चाहिए क्योंकि वे इनलाइन तत्व हैं।

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

— जैकब ब्लॉक
स्रोत

2

मैं h1बीच में एक स्पैन के साथ उपयोग करता हूं ।

HTML उदाहरण:

<h1><span>Test archief</span></h1>

सीएसएस उदाहरण:

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

इतना ही आसान।

— Youri
स्रोत

StackOverflow, Youri में आपका स्वागत है। इसके बजाय span, आप एक का उपयोग करने पर विचार कर सकते हैं div। यह एक ही उद्देश्य को पूरा करता है, सिवाय इसके कि यह स्वाभाविक रूप से एक ब्लॉक तत्व है। :)

— निक्स

इनलाइन तत्व के अंदर @ निक्स ब्लॉक तत्व? नहीं धन्यवाद, स्पैन एक अच्छा विकल्प है

— जोनाथन अज़ुले

1

@MrAzulay h1एक इनलाइन तत्व है। spanसामान लपेटने के लिए अच्छा है, लेकिन divइस मामले में मुझे पसंद करने का कारण यह है, क्योंकि Youri उपयोग करने के लिए CSS सेट करने के spanलिए display:block;। जब मैं उपयुक्त ब्लॉक तत्व ( div) आसानी से उपलब्ध हो तो मुझे इनलाइन तत्व को ब्लॉक तत्व बनाने की बात नहीं दिखती ।

— निक्स

@ निक्स ऐसा करने के लिए एक बहुत ही सामान्य बात नहीं है? इनलाइन के अंदर ब्लॉक लगाते समय खराब अभ्यास imo है। इसके बारे में एक अच्छी पोस्ट है skypoetsworld.blogspot.se/2008/10/…

— जोनाथन अज़ुले

ओह, मैंने अपनी नवीनतम टिप्पणी में गलती की है। मैं सहमत हूं कि आपको इनलाइन तत्व के अंदर एक ब्लॉक नहीं रखना चाहिए, लेकिन h1वास्तव में एक ब्लॉक तत्व है। गलतफहमी के लिए खेद है। फिर भी, मुझे spanएक ब्लॉक एलीमेंट में बनाने की बात नहीं दिख रही है , लेकिन यह काफी हद तक सही है।

— निक्स

2

ऊपर देखते हुए, मैंने इसमें संशोधन किया:

सीएसएस

.divider {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align:center;
    text-transform: uppercase;
}
.divider span {
    position:relative;
}
.divider span:before, .divider span:after {
    border-top: 2px solid #000;
    content:"";
    position: absolute;
    top: 15px;
    right: 10em;
    bottom: 0;
    width: 80%;
}
.divider span:after {
    position: absolute;
    top: 15px;
    left:10em;
    right:0;
    bottom: 0;
}

एचटीएमएल

<div class="divider">
    <span>This is your title</span></div>

ठीक काम करने लगता है।

— user2673353
स्रोत

2

@ काजी का समाधान लेना और स्टाइल को सीएसएस में रखना:

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

तब CSS (लेकिन यह nth चयनकर्ता का उपयोग करने में CSS3 पर निर्भर करता है):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

चीयर्स।

(PS on tbody and tr, Chrome, IE और Firefox में कम से कम एक tbody और tr सम्मिलित करता है, यही वजह है कि @ kajic की तरह, मेरे नमूने में भी इन्हें शामिल नहीं किया गया ताकि आवश्यक HTML मार्कअप में चीजों को छोटा रखा जा सके। 2013 के IE, क्रोम और फ़ायरफ़ॉक्स के नवीनतम संस्करणों के साथ परीक्षण किया गया था)।

— निकोलस पीटरसन
स्रोत

2

डेमो पेज

एचटीएमएल

<header>
  <h1 contenteditable>Write something</h1>
</header>

सीएसएस

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }

— vsync
स्रोत

2

यह मेरे लिए काम करता है और सीमा रेखा को छिपाने के लिए पाठ के पीछे पृष्ठभूमि रंग की आवश्यकता नहीं होती है, इसके बजाय वास्तविक hr टैग का उपयोग करता है। आप विभिन्न आकारों के साथ hr लाइनों के आकार प्राप्त करने के लिए चारों ओर खेल सकते हैं।

<div>
    <div style="display:inline-block;width:45%"><hr width='80%' /></div>
    <div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
    <div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>

— user3898371
स्रोत

2

मैंने एक बनाया था फील किया flexbox का उपयोग करता है और यह भी आप (रेखा, ड्रॉप छाया, इनसेट, धराशायी, आदि के केंद्र में डबल लाइन, प्रतीक) मानव संसाधन की विभिन्न शैलियों दे देंगे कि।

सीएसएस

button {
    padding: 8px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 2px;
  }

  button:hover {
    cursor: pointer;
  }

  button.active {
    background-color: rgb(34, 179, 247);
    color: #fff;
  }

  .codeBlock {
    display: none;
  }

  .htmlCode, .cssCode {
    background-color: rgba(34, 179, 247, 0.5); 
    width: 100%;
    padding: 10px;
  }

  .divider {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    width: 100%;
  }

  .divider.fixed {
    width: 400px;
  }

  .divider > label {
    align-self: baseline;
    flex-grow: 2;
    white-space: nowrap;
  }

  .divider > hr {
    margin-top: 10px;
    width: 100%;
    border: 0;
    height: 1px;
    background: #666;
  }

  .divider.left > label {
    order: 1;
    padding-right: 5px;
  }

  .divider.left > hr {
    order: 2
  }

  .divider.right > label {
    padding-left: 5px;
  }
  /* hr bars with centered text */
  /* first HR in a centered version */

  .divider.center >:first-child {
    margin-right: 5px;
  }
  /* second HR in a centered version */

  .divider.center >:last-child {
    margin-left: 5px;
  }
  /** HR style variations **/

  hr.gradient {
    background: transparent;
    background-image: linear-gradient(to right, #f00, #333, #f00);
  }

  hr.gradient2 {
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }

  hr.dashed {
    background: transparent;
    border: 0;
    border-top: 1px dashed #666;
  }

  hr.dropshadow {
    background: transparent;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
  }

  hr.blur {
    background: transparent;
    border: 0;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px black;
  }

  hr.blur:after {
    background: transparent;
    /* Not really supposed to work, but does */
    content: "\00a0";
    /* Prevent margin collapse */
  }

  hr.inset {
    background: transparent;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  hr.flared {
    background: transparent;
    overflow: visible;
    /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
  }

  hr.flared:before {
    background: transparent;
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
  }

  hr.double {
    background: transparent;
    overflow: visible;
    /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
  }

  hr.double:after {
    background: transparent;
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
  }

एचटीएमएल

<div class="divider left">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>
<p>&nbsp;</p>
<div class="divider left fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center fixed">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>

या यहाँ एक इंटरैक्टिव फिडल है: http://jsfiddle.net/mpyszenj/439/

— जेड
स्रोत

2

आप fieldsetकेवल border-topसेट के साथ क्षेत्र के मध्य में "किंवदंती" तत्व (आपका "अगला भाग" पाठ) संरेखित करने का प्रयास कर सकते हैं । मैं इस बारे में निश्चित नहीं हूं कि फ़ील्ड तत्व के अनुसार एक किंवदंती कैसे तैनात है। मुझे लगता है कि यह सिर्फ एक सरल हो सकता हैmargin: 0px auto चाल हो सकती है, हालांकि।

उदाहरण :

<fieldset>
      <legend>Title</legend>
</fieldset>

— dclowd9901
स्रोत

1

आप इसके बिना पूरा कर सकते हैं <hr />। शब्दार्थ, डिजाइन सीएसएस के साधनों के साथ किया जाना चाहिए, इस मामले में यह काफी संभव है।

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

1

हमेशा अच्छा पुराना FIELDSET होता है

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }

— C2IT में चेत
स्रोत

फ़ील्ड्स को केवल प्रपत्रों के साथ उपयोग किया जाना चाहिए।

— तहलवी

1

एचटीएमएल

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
    <hr class="add-hr">
    <h2>Add Employer</h2>
    <hr class="add-hr">
</div>

सीएसएस

.add-hr { 
    display: block; height: 1px;
    border: 0; border-top: 4px solid #000;
    margin: 1em 0; padding: 0; 
  }

.add-heading h2{
  text-align: center;
}

— निखिल भारद्वाज
स्रोत

0

सीएसएस

.Divider {
width: 100%; height: 30px;  text-align: center;display: flex;
}
.Side{
width: 46.665%;padding: 30px 0;
}
.Middle{
width: 6.67%;padding: 20px 0;
}

एचटीएमएल

<div class="Divider">
    <div class="Side"><hr></div>
    <div class="Middle"><span>OR</span></div>
    <div class="Side"><hr></div>
</div>

आप टैग "स्पैन" में अपने पाठ की लंबाई के आधार पर कक्षा "पक्ष" और "मध्य" में चौड़ाई को संशोधित कर सकते हैं। सुनिश्चित करें कि "मध्य" प्लस की चौड़ाई 2 गुना "साइड" की चौड़ाई 100% के बराबर हो।

— बेटी ली
स्रोत

0

उत्तरदायी, पारदर्शी पृष्ठभूमि, परिवर्तनीय ऊंचाई और विभक्त की शैली, पाठ की चर स्थिति, विभक्त और पाठ के बीच समायोज्य दूरी। एक ही परियोजना में कई विभक्त शैलियों के लिए अलग-अलग चयनकर्ताओं के साथ कई बार आवेदन किया जा सकता है।
नीचे SCSS।

मार्कअप (HTML):

<div class="divider" text-position="right">Divider</div>

सीएसएस :

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 5px dotted #ccc;
  margin: 0 1rem;
}

.divider:before {
  margin-left: 0;
}

.divider:after {
  margin-right: 0;
}

.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
  content: none;
}

के बिना text-position यह केंद्र में चूक जाता है।

डेमो:

कोड स्निपेट दिखाएं

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 5px dotted #ccc;
  margin: 0 1rem;
}

.divider:before {
  margin-left: 0;
}

.divider:after {
  margin-right: 0;
}

.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
  content: none;
}

<span class="divider" text-position="left">Divider</span>
<h2 class="divider">Divider</h2>
<div class="divider" text-position="right">Divider</div>

स्निपेट का विस्तार करें

और SCSS , इसे जल्दी से संशोधित करने के लिए:

$divider-selector    : ".divider";
$divider-border-color: rgba(0,0,0,.21);
$divider-padding     : 1rem;
$divider-border-width: 1px;
$divider-border-style: solid;
$divider-max-width   : 100%;

#{$divider-selector} {
    display: flex;
    align-items: center;
    padding: 0 $divider-padding;
    max-width: $divider-max-width;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
        content: '';
        flex: 0 1 100%;
        border-bottom: $divider-border-width $divider-border-style $divider-border-color;
        margin: 0 $divider-padding;
        transform: translateY(#{$divider-border-width} / 2)
    }

    &:before {
        margin-left: 0;
    }

    &:after {
        margin-right: 0;
    }

    &[text-position="right"]:after,
    &[text-position="left"]:before {
        content: none;
    }
}

इधर उधर होना ।

— ताओ
स्रोत

नमस्ते, मैं वास्तव में आपके कोड स्निपेट की सराहना करता हूं। यदि मैं अंग्रेजी के अलावा (मेरे मामले में, कोरियाई) विभक्त के साथ एक पाठ डालता हूं, तो ग्रंथ हर दो अक्षरों में लाइन तोड़ते हैं। क्या आप यह पता लगा सकते हैं कि क्यों?

— कैडेंजह

0

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}

<div>
   <hr> <span class="orSpan">OR</span>
</div>

स्निपेट का विस्तार करें

आपको मार्जिन प्रॉपर्टी को समायोजित करने की आवश्यकता हो सकती है

— Srikrushna
स्रोत

0

<div class="divider-line-x"><span>Next section</span></div>

/***** Divider *****/

.divider-line-x {
    position: relative;
    text-align: center; 
    font-family: Arial; 
    font-weight: bold;
    font-size: 12px;    
    color: #333;
    border-bottom: 1px dashed #ccc;
}

.divider-line-x span {
    position: relative; 
    top: 10px;
    padding: 0 25px;    
    background: #fff;
}

— messin
स्रोत

पंक्ति की तरह <hr /> के मध्य में केंद्रित पाठ जोड़ें

एचटीएमएल

सीएसएस

एचटीएमएल

सीएसएस

सीएसएस

एचटीएमएल