दिलचस्प पोस्ट
क्रोम को स्व-हस्ताक्षरित स्थानीयहोस्ट प्रमाणपत्र प्राप्त करना पीएचपी के साथ समय क्षेत्र की एक ड्रॉप डाउन सूची उत्पन्न करना इनलाइन तत्वों की चौड़ाई को निर्धारित करना पुनरावर्ती या पुनरावृत्ति? मावेन निर्भरताओं को हल नहीं कर सका, कलाकृतियों को हल नहीं किया जा सका किसी विशेष पूर्णांक को किसी सरणी में रखते हुए गणना करें RTSP का उपयोग करते हुए वीडियो स्ट्रीमिंग: एंड्रॉइड स्ट्रिंग से पांडा डेटाफ्रेम कैसे बनाऊँ? लिनक्स खोल स्क्रिप्ट नाम के लिए अग्रणी शून्य जोड़ने के लिए "गंभीर त्रुटि के समाधान: '100' के अधिकतम फ़ंक्शन नेस्टिंग स्तर तक पहुंचे, निरस्त!" PHP में <हेडर> बनाम कोणीय जेएस: एनजी-दोहराने की सूची तब अपडेट नहीं की जाती जब मॉडल एरे से एक मॉडल एलिमेंट को अलग किया जाता है बड़ी सरणी आकारों में विभाजन की गलती किसी अन्य ड्रॉपडाउन में चयन के आधार पर ड्रॉपडाउन सूचियों पर विकल्पों को गतिशील रूप से कैसे पॉप्युलेट करना है? जीपीसी पैड एनओपी के साथ क्यों काम करता है?

मध्यवर्ती पाठ को एक <hr /> – जैसा लाइन के बीच में जोड़ें

मैं सोच रहा हूं कि एक्स-एचटीएमएल 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> 

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

Solutions Collecting From Web of "मध्यवर्ती पाठ को एक <hr /> – जैसा लाइन के बीच में जोड़ें"

कैसा रहेगा:

 <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> 

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

संरचना

 <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/


एसएएसएस (एससीएसएस) संस्करण

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

 //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; } 

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

 .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

सीएसएस, और एचटीएमएल उपयोग:

 .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> 

मैं सिर्फ एक ही समस्या में आया था, यहां इसे हल करने का एक तरीका है:

 <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/

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

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


मैं line-height:0 इस्तेमाल किया line-height:0 मेरी साइट के शीर्षलेख में प्रभाव बनाने के लिए guerilla-lumnus.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/ पर है

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

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

 <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/ देखें

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

यदि आप सीएसएस का उपयोग कर सकते हैं और नापसंद 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" एचटीएमएल को हटा दिया गया है लेकिन इसे सभी ब्राउज़रों में पाठ को सही ढंग से केंद्रित करना चाहिए।

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

 .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> 
 <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> 
 <fieldset style="border:0px; border-top:1px solid black"> <legend>Test</legend> </fieldset> 

ईविल हैक …

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

 ​h1 { text-align: center; } h1:before, h1:after { content: ""; background: url('http://img.hiwab.com/html/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 की यादृच्छिक छवि)

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

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

 <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> 

मैं बीच में एक अवधि के साथ एक 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 } 

इतना ही आसान।

उपरोक्त को देखकर, मैंने इसमें संशोधित किया:

सीएसएस

 .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> 

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

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

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

तो सीएसएस (लेकिन यह एनएसएस चयनकर्ता का उपयोग करने पर CSS3 पर निर्भर करता है):

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

चीयर्स।

(पीएस और टीडी, क्रोम, आईई और फ़ायरफ़ॉक्स में कम से कम स्वचालित रूप से एक और टीआरटी सम्मिलित होती है, यही वजह है कि मेरा नमूना, @ कैजिक की तरह, इन्हें शामिल नहीं किया ताकि आवश्यक html मार्कअप में चीजों को कम रखा जा सके। IE, क्रोम और फ़ायरफ़ॉक्स के नवीनतम संस्करणों के साथ 2013 की जांच की गई थी)।

डेमो पेज

एचटीएमएल

 <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; } 

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

 <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> 

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

  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; } 

आप <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> 

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

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

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

आप कुछ उपयुक्त पृष्ठभूमि छवि के साथ एक आवरण ब्लॉक बना सकते हैं (और अपने केंद्रित पाठ ब्लॉक के लिए कुछ पृष्ठभूमि रंग भी सेट कर सकते हैं)

सीएसएस

 .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% के बराबर हो।

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

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; } 

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

सीएसएस

 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/