মাঝের শব্দগুলির সাথে একটি অনুভূমিক রেখার জন্য CSS কৌশল technique

Question

আমি মাঝখানে কিছু পাঠ্য দিয়ে একটি অনুভূমিক নিয়ম তৈরি করার চেষ্টা করছি। উদাহরণ স্বরূপ:

----------------------------------- এখানে আমার শিরোনাম ------------ -----------------

সিএসএসে করার উপায় আছে কি? সমস্ত "-" ছাড়াই স্পষ্টতই ড্যাশ।

Comments

এটি কি কোনও formট্যাগের ভিতরে রয়েছে ?

— ত্রিশডট

সেক্ষেত্রে, ত্রিশটি আমার উত্তরের উত্তরে যেভাবে নির্দেশ করেছে, আপনি fieldsetএবং legendউপাদানগুলি সন্ধান করতে পারেন

— স্টিফান মুলার

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>

আমি কেবল ক্রোমে পরীক্ষা করেছি, তবে অন্য ব্রাউজারগুলিতে এটি কাজ না করার কোনও কারণ নেই।

জেএসফিডাল: http://jsfiddle.net/7jGHS/

Comments

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

— DrLazer

প্রায় এক চতুর্থাংশ জুড়ে এটি করার কোনও উপায়?

— ট্রয় কোসেন্টিনো

"পাঠ্য-প্রান্তিককরণ: বাম; পাঠ্য-ইনডেন্ট: 40px;" ব্যবহার করে বাম দিক থেকে পাঠ্যকে ইনডেন্ট করুন; এইচ 2 স্টাইলে।

— ম্যাট__ সি

এটি নমনীয় নয়, যেহেতু আপনি পাঠ্যের পটভূমির রঙ সাদা হিসাবে ঠিক করেন fix

— চাও

@ নাটবারবেটিনি এই লাইনটি না লাগলে আপনি এই কাজটি করার চেষ্টা করছেন এবং পাঠ্যের পিছনে অন্যান্য স্টাফের স্বচ্ছ ব্যাকগ্রাউন্ড থাকতে হবে।

— কোবার্ন

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>

আমি এটি আইই 8, আই 9, ফায়ারফক্স এবং ক্রোমে পরীক্ষা করেছি। আপনি এটি এখানে চেক করতে পারেন http://jsfiddle.net/Puigcerber/vLwDf/1/

Comments

আমি এটিকেও সেরা পছন্দ করি। স্টাইল পেতে যেখানে পাঠ্যটি কেন্দ্রীভূত না করে বাম থেকে ইন্ডেন্ট করা রয়েছে এই পরিবর্তনটি ব্যবহার করুন: h1 { ওভারফ্লো: লুকানো; `পাঠ্য-সারিবদ্ধ: বাম; `পাঠ্য-ইনডেন্ট: 40px; `}

— ম্যাট__ সি

এটি সত্যিই একটি ভাল সমাধান; বিশেষত এটি যে কোনও পটভূমির সাথে কাজ করে এবং শিরোনাম উপাদানটিতে একটি সেট প্রস্থের প্রয়োজন হয় না।

— লুক

এটা অসাধারণ. আমি আপনার কোডটি পাঠ্যের বাম-প্রান্তিককরণের জন্য এবং :afterউপাদানটিকে ব্লকের প্রস্থের জন্য কিছুটা অভিযোজিত করেছি । আমি কৌতূহলী: এর ভূমিকা ঠিক কী margin-right: -50%? আমি যখন কোড নিয়ে ঘুরপাক খাচ্ছিলাম, তখন সেই সম্পত্তিটি মিস করা সজ্জাকে অন্য লাইনে ভেঙে ফেলবে। এমনকি যখন :after100% প্রস্থ নির্ধারিত হয় তখনও এটি ফিট করার জন্য আমার 50% এর নেতিবাচক মার্জিন-ডান প্রয়োজন। কেন?

— বিটলনাটাইটো

যেহেতু আমি এটি বুঝতে পারি, উভয় পক্ষের নেতিবাচক মার্জিন যুক্ত করা উপাদানটিকে উভয় দিকের দিকে টান দেয় তাই সে কেন্দ্রে পরিণত হয়।

— পুইগারবার

এই সমাধানটি সম্পর্কে আমি যে বিষয়গুলি পছন্দ করি তার মধ্যে একটি হ'ল এটি এমন পরিস্থিতিতে কাজ করে যেখানে আপনি জানেন না যে পটভূমিটি কী রঙ। এই সমস্যার জন্য সহজেই এখন পর্যন্ত সেরা সমাধান।

— জোমো 1984

Answer 3

ঠিক আছে, এটি আরও জটিল তবে এটি আইই 8 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

— জাভিয়ার জন

হ্যাঁ @ জাভেয়ার-জন, এটাই আমার উত্তর ;)

— পুইগসারবার

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>

জেএসফিডাল: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

Comments

প্যাডিং কিভাবে পাবেন?

— সিলার

দ্রুত এবং নোংরা, আপনি একটি & nbsp যোগ করতে পারেন;

— ক্রিসমার্ক

আমি অন্য একটি উপাদান ব্যবহার করছি: <h1><span>Today</span></h1>স্প্যানের উপর একটি মার্জিন / প্যাডিং সহ।

— জেসি বুয়েনহুইস 16

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

এই জন্য আপনাকে ধন্যবাদ, খুব চতুর!

— জিমি ওবনিও অ্যাবোর

নিখুঁত, একমাত্র সমাধান যা আমার জন্য কাজ করেছিল যখন পটভূমি একটি চিত্র ছিল

— cjohansson

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

দুর্দান্ত, একমাত্র সমস্যা হ'ল আপনাকে ব্যাকগ্রাউন্ডটি সাদাতে সেট করতে হবে এবং এটি স্বচ্ছতে সেট করতে পারবেন না।

— মার্নিক্স

সেক্ষেত্রে আপনাকে দুটি লাইন দিয়ে কাজ করতে হবে, প্রতিটি পাশে একটি করে। এটি একটি পরিষ্কার উপায়ে অর্জন করা কঠিন হতে চলেছে ..

— স্টিফান মুলার

আমার প্রিয়তম দৃষ্টিভঙ্গি তবে দুর্ভাগ্যক্রমে এটি কোনও কারণে ইমেল ক্লায়েন্টগুলিতে কাজ করে না (জিমেইল মোবাইল এবং ওয়েব)

— রিডওয়ल्फ

Answer 9

আমি এই সাধারণ সাজসজ্জার জন্য কয়েকটি সমাধানের সন্ধান করছি এবং আমি বেশ কয়েকটি পেয়েছি, কিছু অদ্ভুত, কিছু জেএস সহ ফন্টের উচ্চতা গণনা করতে এবং ব্লে, ব্লে, ব্লে, তারপর আমি পড়েছি এই পোস্টে এক এবং থেকে কোনো মন্তব্য পড়তে thirtydot কথা fieldsetএবং legendএবং আমি ভেবেছিলাম যে এটি ছিল।

আমি এই 2 উপাদানগুলির শৈলীর উপর নজর রাখছি, আমি অনুমান করি আপনি তাদের জন্য ডাব্লু 3 সি মানগুলি অনুলিপি করতে পারেন এবং এটি আপনার .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/

আমি সীমানা শৈলীর সাথে খেলেছি এবং এটি অ্যান্ড্রয়েডেও কাজ করে;) (কিটকাট ৪.XX এ পরীক্ষিত)

সম্পাদনা করুন:

বেকারভ আর্টুরের ধারণাকে অনুসরণ করা যা একটি দুর্দান্ত বিকল্প, আমি একটি .SVG দিয়ে স্ট্রোক তৈরি করতে .png বেস 64 চিত্রটি পরিবর্তন করেছি যাতে আপনি কোনও রেজোলিউশনে রেন্ডার করতে পারেন এবং এতে যুক্ত কোনও সফ্টওয়্যার ছাড়াই উপাদানটির রঙ পরিবর্তন করতে পারেন :)

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

আইই 8 এবং এর জন্য সমাধান ...

মূল্যবান বিষয়গুলি:

ব্যবহার background-colorকোনও সীমানাকে মাস্ক করার জন্য করা সর্বোত্তম সমাধান নাও হতে পারে। আপনার যদি জটিল (বা অজানা) পটভূমির রঙ (বা চিত্র) থাকে তবে মাস্কিং শেষ পর্যন্ত ব্যর্থ হবে। এছাড়াও, আপনি যদি পাঠ্যের আকার পরিবর্তন করেন, আপনি লক্ষ্য করবেন যে সাদা ব্যাকগ্রাউন্ড রঙ (বা যা কিছু সেট করুন) উপরের লাইনে (বা নীচে) পাঠ্যটি আচ্ছাদন করা শুরু করবে।

আপনি বিভাগগুলি কত বিস্তৃত "অনুমান" করতে চান না , কারণ এটি শৈলীগুলিকে অত্যন্ত জটিল এবং প্রায়শই কোনও প্রতিক্রিয়াশীল সাইটটিতে প্রয়োগ করা অসম্ভব করে তোলে যেখানে সামগ্রীর প্রস্থ পরিবর্তন হচ্ছে।

সমাধান:

( জেএসফিডল দেখুন )

একটির সাথে একটি সীমানা "মাস্কিং" না করে 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।

সীমাবদ্ধতা:

• মাল্টি-লাইন পাঠ্য নেই। একক লাইন।
• এইচটিএমএল মার্কআপটি মার্জিত নয়
• top.lineউপাদান সম্পত্তি সম্পত্তি অর্ধেক হতে হবে line-height। সুতরাং, আপনি একটি আছে যদি line-heightএর 1.5em, তারপর topহওয়া উচিত -.75em। এটি একটি সীমাবদ্ধতা কারণ এটি স্বয়ংক্রিয় নয় এবং আপনি যদি এই স্টাইলগুলি বিভিন্ন লাইন-উচ্চতা সহ উপাদানগুলিতে প্রয়োগ করেন তবে আপনার line-heightস্টাইলটি পুনরায় প্রয়োগ করার প্রয়োজন হতে পারে ।

আমার জন্য, এই সীমাবদ্ধতাগুলি বেশিরভাগ বাস্তবায়নের জন্য আমার উত্তরের শুরুতে উল্লেখ করা "সমস্যাগুলি" ছাড়িয়ে গেছে।

Comments

ক্রোমে কাজ করে। শব্দার্থক এবং মোটামুটি সহজ বলে মনে হচ্ছে। বুটস্ট্র্যাপের সাথে কাজ করে।

— জেফ অ্যানসেল

আমাকে সীমান্ত-পতন যুক্ত করতে হয়েছিল:। গোষ্ঠীতে পৃথক করা, কারণ আমি সক্ষম হয়ে এটিকে ব্যবহার করছি যার একটি আলাদা সেটিংস রয়েছে। দুর্দান্ত কাজ করে।

— ব্রায়ান ম্যাকেকে

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

যদি কেউ ভাবছেন যে কীভাবে শিরোনামটি এমনভাবে সেট করা যায় যা এটি বাম দিকের একটি নির্দিষ্ট দূরত্বে উপস্থিত হয় (এবং উপরে উপস্থাপিত হিসাবে কেন্দ্রিক নয়) তবে আমি পুইগারবার কোডটি সংশোধন করে বুঝতে পেরেছি।

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

এখানে জেএসফিডাল ।

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 শ্রেণি = "পটভূমি"> <স্প্যান> <br> আমাদের পরিষেবাগুলি </ span> </h6> এটি এইচটিএমএল কোড

— ডমিনিক অমল জো এফ

জো, আপনি এইচটিএমএল কোড যুক্ত করতে নিজের নিজের উত্তর সম্পাদনা করতে পারেন - এটি মন্তব্যে রাখার চেয়ে অনেক ভাল। উত্তরের সাথে আপনার কিছু ব্যাখ্যা যুক্ত করা উচিত।

— মোগসদাদ

দুঃখিত, মোগসাদাদ আমি এইচটিএমএল কোডটি রাখতে ভুলে গেছি, এজন্যই আমি এখানে রেখেছি।

— ডমিনিক অমল জো এফ

Answer 14

পার্শ্বে গতিশীল এবং 0-উচ্চতা, গতিশীল উল্লম্ব অবস্থানের জন্য পরম-অবস্থান ডিভগুলি পূরণ করতে আমি একটি টেবিল বিন্যাস ব্যবহার করি:

• কোনও হার্ড-কোডেড মাত্রা নেই
• কোন ইমেজ
• ছদ্ম-উপাদান নেই
• পটভূমি শ্রদ্ধা
• নিয়ন্ত্রণ বার উপস্থিতি

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

আমি দেখতে পেয়েছি যে সত্যিকারের কেন্দ্রের নীচে কিছুটা নিচে পাঠ্যের সাথে সবচেয়ে ভাল দেখাচ্ছে; এটি যেখানে সামঞ্জস্য করা যায় 55%(লম্বা উচ্চতা বারটি কম করে)। লাইনের উপস্থিতি যেখানে রয়েছে সেখানে পরিবর্তন করা যেতে পারে border-bottom।

এইচটিএমএল:

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

যে কেউ চাইলে, সিএএসএস ব্যবহারের সেরা সমাধান আইএমএইচও করুন একটি ফ্লেক্সবক্স।

এখানে একটি উদাহরণ:

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

এটি সর্বদা একটি বাম এবং ডানদিকে একটি লাইন সহ লাইন এবং আপনার সামগ্রীর মধ্যে মার্জিন নিয়ন্ত্রণ করার সহজ সহ একটি পুরোপুরি কেন্দ্রিক প্রান্তিককরণ সামগ্রীর ফলস্বরূপ should

এটি আপনার শীর্ষ নিয়ন্ত্রণের আগে এবং পরে একটি লাইন উপাদান তৈরি করে এবং আপনার কন্টেন্টকে অর্ডার 2 হিসাবে সেট করার সময় আপনার ফ্লেক্স পাত্রে 1,3 অর্ডার করার জন্য সেট করে (মাঝখানে যান)। 1 এর বৃদ্ধির আগে / পরে প্রদান করা আপনার বিষয়বস্তুকে কেন্দ্রিক রাখার সময় তাদেরকে সর্বাধিক শূন্য স্থান গ্রাস করবে।

আশাকরি এটা সাহায্য করবে!

Answer 17

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

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

<hr><p>def</p>

Answer 18

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

এইচটিএমএল

        <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 ব্যবহার করা লোকেরা এই পদ্ধতিতে অর্জন করতে পারে। এইচটিএমএল কোডে উল্লিখিত ক্লাসগুলি বুটস্ট্র্যাপ 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;
 }

এবং আপনার এইচটিএমএল লিখুন

<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

• # ই0e0e0 রঙের একক বিন্দু দিয়ে ছোট ছবি 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>