217

আমি ভাবছি যে এক্সএইচটিএমএল ১.০ তে কী বিকল্প রয়েছে যেমন পাঠ্যের উভয় পাশেই একটি লাইন তৈরি করতে কঠোর:

বিভাগ এক
----------------------- পরবর্তী বিভাগ -----------------------
বিভাগ দুটি

আমি এই জাতীয় কিছু অভিনব কাজ করার কথা ভেবেছি:

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

প্রান্তিককরণের সমস্যাগুলি ছাড়াও, উভয় বিকল্পই 'ম্লান' বোধ করে এবং আপনি যদি এটি আগে দেখে থাকেন এবং একটি সুন্দর সমাধান সম্পর্কে জানেন তবে আমি অনেক বাধ্য li

— ব্রায়ান এম হান্ট
সূত্র

3

নো-অতিরিক্ত ট্যাগ চ্যালেঞ্জ সহ এখানে আরও একটি থ্রেড রয়েছে - এবং একটি সমাধান! stackoverflow.com/questions/12648513/...

— willoller

1

stackoverflow.com/questions/5214127/… এখনও সেরা সমাধান।

এখানে একটি দরকারী উত্তর সিএসএস গ্রিড নিয়োগ করবে।

— ব্রায়ান এম হান্ট

যোগ করা হয়েছে একটি উত্তর রঙ এবং স্ট্রোক শৈলী (কঠিন, ডটেড, ড্যাশ) বিভাজক, টেক্সট (বাম, ডান, কেন্দ্র) পদে, সেইসাথে: (SCSS) যা সেট পটভূমি ছাড়া একটি বিভাজক রূপান্তরিত প্রায় কোনো উপাদান এবং সেটিং পারবেন ক্লাস যা এটি প্রয়োগ করে (ডিফল্টরূপে .divider)।

— তাও

প্রদত্ত বর্তমান flexbox সমর্থন আমি মনে করি আমার উত্তর কিছু দৃশ্যমানতা লাভ করতে পারে।

— ম্যাট দ্যাটিক্যাট

63

আমি জানি না এটি বের করা হয়েছে কিনা তবে ফ্লেক্সবক্স বেশ সমাধান দেয়:

<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
সূত্র

সেরা উত্তর আজকাল ফ্লেক্সবক্স সমর্থন বিবেচনা করে

— আকিভিজগোর্ডন

এটি একটি দুর্দান্ত সমাধান

— স্মাইলস

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>

স্নিপেট প্রসারিত করুন

এই জেএসফিডেলটি দেখুন ।

আপনি এটি ব্যবহার করতে vwবা %প্রতিক্রিয়াশীল করতে পারেন ।

— ফ্লেচার মুর
সূত্র

2

সঠিক শীর্ষ মান পাওয়া কিছুটা শক্ত। এটি ঠিক -০.৫ মিটার নয়;

— মিতার

নিখুঁত। "প্রতিক্রিয়াশীল" খুব

— জিমএক্সসি

4

এমন একটি সমাধানের জন্য আমার উত্তরটি দেখুন যা আপনাকে পটভূমির রঙ বা প্রস্থ উল্লেখ করার প্রয়োজন নেই।

— মার্টিনএফ

প্রতিক্রিয়াশীল, স্বচ্ছ বিজি, পরিবর্তনশীল শৈলী এবং বিভাজকের উচ্চতা, পাঠ্যের পরিবর্তনশীল অবস্থানের জন্য আমার উত্তর দেখুন । একই প্রকল্পে একাধিক স্টাইলের বিভাজক থাকার জন্য, এসসিএসএস ব্যবহার করে বিভিন্ন নির্বাচকদের ক্ষেত্রেও একাধিকবার প্রয়োগ করা যেতে পারে। যে কোনও সঙ্গে কাজ করে 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 (এসসিএসএস) সংস্করণ

এই সমাধানের ভিত্তিতে, আমি এসসিএসএসকে "রঙের সম্পত্তি সহ" যুক্ত করেছি যদি এটি কারওর পক্ষে সহায়তা করতে পারে ...

//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
সূত্র

আপনি যদি লাইনের জন্য কোনও চিত্র ব্যবহার করেন তবে এই সংস্করণটি আরও ভাল কাজ করে - বা কমপক্ষে সম্পাদনা করা এবং প্রতিক্রিয়াশীল থাকা সহজ

— তেহলিভি

খুব সুন্দর কাজ! আপনি কি ডাবললাইন তৈরি করতে আপনার উইজার্ডারি ব্যবহার করতে পারেন? (অন্যথায়, আমি কেবল একটি ক্ষুদ্র পুনরাবৃত্তি পটভূমি চিত্র ব্যবহার করে অবলম্বন করব।)

— wloescher

3

দুর্দান্ত স্নিপেট! ধন্যবাদ :)

— plong0

2

এটি সেরা উত্তর কারণ এটি ব্যাকগ্রাউন্ডটি সেট না করেই কাজ করবে, এবং যখন আপনাকে স্বচ্ছ পটভূমি সেট করতে হবে

— দিনেশ দবি

1

প্রথম উদাহরণটি কেবল দুর্দান্ত! অভিনন্দন! এটি সঠিক উত্তর হওয়া উচিত!

— লুইজ এডুয়ার্ডো

86

আপনি এটি পূর্বে এবং :: দিয়ে কন্টেইনার বা পটভূমির রঙের প্রস্থতা না জেনে এবং লাইন ব্রেকগুলির বৃহত্তর স্টাইলিং অর্জন করতে সক্ষম করতে পারেন। উদাহরণস্বরূপ, এটি ডাবল-লাইন, ডটেড লাইন ইত্যাদি তৈরি করতে সংশোধন করা যেতে পারে

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>

স্নিপেট প্রসারিত করুন

এসসিএসএস সংস্করণ:

.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

মার্জিত সমাধান, যদিও এটির একটি সতর্কতা রয়েছে: যদি কোনও পাঠ্য না থাকে, আপনার এখনও লাইনের মধ্যে একটি ফাঁক থাকবে।

— ফারসাইড

12

সত্যই এই থ্রেডের এটি পরিষ্কার সমাধান, কোনও পাঠ্য না থাকা বিষয়টিকে উপেক্ষা করা যাবে না কারণ আপনি সর্বদা পাঠ্যের সাথে বিভাজক চান।

— রবার্ট

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>

স্নিপেট প্রসারিত করুন

JsFizz এ লাইভ পূর্বরূপ ।

— ডায়োডিয়াস - জেমস ম্যাকফার্লেন
সূত্র

4

এটি নিখুঁতভাবে কাজ করে এবং <ঘন্টা /> ব্যবহার করে তাই সম্ভবত এই উত্তরটির সাথে কী ভুল হতে পারে? আমি কিছু বলিনি.

— ર્

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

— রবার্ট কাজিক

এছাড়াও, ভাঙা অংশে পাঠ্য সহ একটি লাইন ভাঙা অংশ পথ কী, যদি তাদের মধ্যে পাঠ্য সহ দুটি লাইন না থাকে?

— রবার্ট কাজিক

আপনার সেখানে যথাযথ টিআর ট্যাগ নিক্ষেপ করা উচিত। আমি মনে করি এটিই আমাকে এক মুহুর্তের জন্য বিভ্রান্ত করেছে। আমি মূলত ভেবেছিলাম কোনও কারণে এটি তিনটি কলাম নয়, তিন লাইনে ছিল। সঠিক মার্কআপ সম্ভবত আমাকে সেভাবে দেখার কারণ না করত। নির্বিশেষে, এটি অবশ্যই কার্যকর একটি সমাধান।

— ড্রাকোরাট

1

তবে এটি সারণী ব্যবহার করে, এটি অনুমোদিত নয়! ওহ, মজা করছি গ্রিডগুলির তাদের স্থান রয়েছে, প্রায় সমস্ত অন্যান্য জিইউআই এক্সএমএল ফ্রেমওয়ার্কগুলি এটি স্বীকৃতি দেয় এবং এগুলি সর্বত্র ব্যবহার করে (যেমন ডাব্লুপিএফ / এক্সএএমএল)। সমাধান সাথীর জন্য ধন্যবাদ! এটি 3 টিরও বেশি ভোটের দাবিদার। আমি সন্দেহ করি যে ঘৃণ্য টেবিলগুলির প্রতি লোকদের ঘৃণা যদিও বাধা হয়ে দাঁড়াবে।

— নিকোলাস পিটারসেন

10

হালনাগাদ: এটি এইচটিএমএল 5 ব্যবহার করে কাজ করবে না

পরিবর্তে, আরও কৌশলগুলির জন্য এই প্রশ্নটি পরীক্ষা করে দেখুন: সিএসএস চ্যালেঞ্জ, আমি কি আরও এইচটিএমএল প্রবর্তন না করে এটি করতে পারি?

আমি line-height:0আমার সাইটের গেরিলা-শরতের ডটকমের শিরোনামে এফেক্টটি তৈরি করতাম

<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 CSS এর হস্তক্ষেপ সন্দেহ করি)। :( তবে এটি সত্যিই দুর্দান্ত

— ব্রায়ান এম হান্ট

আমি মনে করি আপনার এইচ 1 স্প্যানটি নীচে নামছে।

— imns

1

এটি একটি "হ্যাক" যা ডক্টইপিএইচএইচটিএমএল 1.0 ট্রানজিশনালটির জন্য বিভিন্ন রেন্ডারিং আচরণকে নিয়োগ করে। আপনি যদি DOCTYPE এইচটিএমএল ব্যবহার করেন (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

আপনি যদি সিএসএস ব্যবহার করতে পারেন এবং 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"এইচটিএমএল অবহেলিত তবে এটি সমস্ত ব্রাউজারে সঠিকভাবে পাঠ্যটি কেন্দ্র করে নেওয়া উচিত।

— ট্রে হুনার
সূত্র

আমি কী যাচ্ছিলাম তার আরও বিশদ বিবরণ।

— dclowd9901

আমি নিশ্চিত যে <legend>কোনও উপাদান blockবা inline-blockউপাদানটির প্রদর্শন বৈশিষ্ট্য গ্রহণ করি, কারণ এটি প্যাডযুক্ত এবং প্রান্তিক হতে পারে , যার অর্থ text-align:centerকাজ করা উচিত নয় ...

— dclowd9901

হ্যাঁ কিংবদন্তি শব্দার্থবিজ্ঞানের জন্য দুর্দান্ত - আমি এগুলি রেডিও গ্রুপগুলি মোড়ানোর জন্য ব্যবহার করি তবে তারা কুখ্যাতভাবে জেদী

— উইলোলার

আমি আমার উত্তর সংশোধন করেছি। দুর্ভাগ্যক্রমে legendউপাদান স্টাইলিংয়ে কিছু নির্দিষ্ট ব্রাউজারের একগুঁয়েতার কারণে , align="center"আমি একমাত্র সমাধানটি খুঁজে পেলাম যে এটি নির্ভরযোগ্যভাবে কেন্দ্র করে a legend।

— ট্রে হানার

6

বুটস্ট্র্যাপ গ্রিড:

এইচটিএমএল:

  <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

কেবলমাত্র CSS এর সাথে একটি সহজ সমাধান, কোনও পটভূমি কৌশল নেই ...

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

এইচটিএমএল:

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

দুষ্ট হ্যাক ...

— দানু
সূত্র

1

আমি এটিকে হ্যাক বলব না, তবে আমি পরীক্ষা করব যে এটি যে সমস্ত ব্রাউজারগুলিতে আপনি সমর্থন করতে চান তাতে এটি কাজ করে।

— নিক লারসন

ফিল্ডসেটটি এর মতো ব্যবহার করতে চায় না, এটি জায়গায় হ্যাক হয়েছে ;-)

— দানু

3

2 বছরের পুরানো পোস্টটি বাম্পিং করছে তবে আমি কেবলমাত্র একটি উপাদান এবং সিএসএস ব্যবহার করে এই পরিস্থিতিতে কীভাবে পৌঁছাচ্ছি তা এখানে।

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/ (সীমান্তের জন্য নেওয়া গুগল থেকে এলোমেলো চিত্র)।

এই পদ্ধতির একমাত্র ত্রুটি এটি আই 7 সমর্থন করে না।

— লাজার ভোকোভিচ
সূত্র

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মাঝখানে স্প্যান সহ একটি ব্যবহার করব ।

এইচটিএমএল উদাহরণ:

<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
সূত্র

স্ট্যাকওভারফ্লো, ইউরিতে আপনাকে স্বাগতম। একটি পরিবর্তে span, আপনি একটি ব্যবহার বিবেচনা করতে পারেন div। প্রাকৃতিকভাবে এটি একটি ব্লক উপাদান নয়, এটি একই উদ্দেশ্যে কাজ করে। :)

— নিক্স

@ নিক্স ব্লক উপাদান ইনলাইন উপাদান ভিতরে? না ধন্যবাদ, স্প্যানটি একটি ভাল পছন্দ

— জোনাথন আজুলায়

1

@ মিআরজুলাই h1একটি ইনলাইন উপাদান। spanস্টাফ মোড়ানো জন্য দুর্দান্ত, কিন্তু কারণ আমি পছন্দ করি একটিdiv এই ক্ষেত্রে, হয় Youri ব্যবহার সিএসএস সেট করতে কারণ 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 (তবে এটি নবম নির্বাচক ব্যবহারের ক্ষেত্রে CSS3 এর উপর নির্ভর করে):

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

চিয়ার্স।

(পিএস অন টডি এবং টিআর, ক্রোম, আইই এবং ফায়ারফক্স কমপক্ষে স্বয়ংক্রিয়ভাবে একটি টডি এবং টিআর সন্নিবেশ করায়, তাই আমার কাজী @ ক্যাসিকের মতো নমুনাগুলি এগুলি অন্তর্ভুক্ত করে না যাতে প্রয়োজনীয় এইচটিএমএল চিহ্নিতকরণে জিনিসগুলি আরও ছোট রাখতে হয় This এই সমাধান ২০১৩ সালের হিসাবে, আইই, ক্রোম এবং ফায়ারফক্সের নতুন সংস্করণ দিয়ে পরীক্ষা করা হয়েছিল)।

— নিকোলাস পিটারসেন
সূত্র

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

এটি আমার পক্ষে কাজ করেছে এবং সীমানা লাইনটি লুকানোর জন্য পাঠ্যের পিছনে পটভূমির রঙের প্রয়োজন হয় না, পরিবর্তে প্রকৃত এইচআর ট্যাগ ব্যবহার করে। এইচআর লাইনের বিভিন্ন আকারের জন্য আপনি প্রস্থগুলির সাথে চারপাশে খেলতে পারেন।

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

— সি 2 আইটিতে চেট
সূত্র

ফিল্ডসেটগুলি কেবল ফর্ম সহ ব্যবহার করা উচিত।

— তেহলিভি

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>

CSS

.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

আপনি কিছু উপযুক্ত ব্যাকগ্রাউন্ড ইমেজ সহ একটি র‌্যাপার ব্লক তৈরি করতে পারেন (এবং আপনার কেন্দ্রিক পাঠ্য ব্লকের জন্য কিছু পটভূমি রঙও সেট করে)।

— scaryzet
সূত্র

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

প্রতিক্রিয়াশীল, স্বচ্ছ পটভূমি, পরিবর্তনশীল উচ্চতা এবং বিভাজকের শৈলী, পাঠ্যের পরিবর্তনশীল অবস্থান, বিভাজক এবং পাঠ্যের মধ্যে স্থায়ী দূরত্ব distance একই প্রকল্পে একাধিক বিভাজক শৈলীর জন্য বিভিন্ন নির্বাচকদের সাথে একাধিকবার প্রয়োগ করা যেতে পারে।
এসসিএসএস নীচে।

মার্কআপ (এইচটিএমএল):

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

স্নিপেট প্রসারিত করুন

এবং এসসিএসএস , এটি দ্রুত সংশোধন করতে:

$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
সূত্র

একটি <ঘন্টা /> - এর মতো লাইনের মাঝে কেন্দ্রে পাঠ্য যুক্ত করুন

এইচটিএমএল

সিএসএস

এইচটিএমএল

CSS

সিএসএস

এইচটিএমএল