কিভাবে একটি ফ্লেক্সবক্সের ভিতরে উল্লম্বভাবে পাঠ্য সারিবদ্ধ করবেন?

Question

আমি কোনও অভ্যন্তরে উল্লম্বভাবে সারিবদ্ধ করার জন্য ফ্লেক্সবক্স ব্যবহার করতে চাই <li>তবে দুর্দান্ত সাফল্য পাচ্ছি না।

আমি অনলাইনে চেক করেছি এবং টিউটোরিয়ালগুলির অনেকগুলিই আসলে একটি মোড়ক ডিভি ব্যবহার align-items:centerকরে যা পিতামাতার উপর ফ্লেক্স সেটিংস থেকে পাওয়া যায় তবে আমি ভাবছি যে এই অতিরিক্ত উপাদানটি কাটা সম্ভব?

তালিকার আইটেমের উচ্চতা গতিশীল হওয়ার কারণে আমি এই মুহুর্তে ফ্লেক্সবক্স ব্যবহার করা পছন্দ করেছি %।

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Answer 1

পরিবর্তে ব্যবহার align-self: centerব্যবহার করুন align-items: center।

পরিবর্তন flex-directionবা ব্যবহারের দরকার নেই text-align।

এটিকে সমস্ত কাজ করতে একটি কোড সমন্বয় সহ আপনার কোড এখানে রয়েছে:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

align-selfসম্পত্তি প্রযোজ্য আনমন আইটেম । ব্যতীত আপনার liকোনও ফ্লেক্স আইটেম নয় কারণ এর পিতামাতা - এর ul- নেই display: flexবা display: inline-flexপ্রয়োগ নেই।

সুতরাং, এটি ulকোনও ফ্লেক্স ধারক নয়, এটি liকোনও ফ্লেক্স আইটেম নয় এবং align-selfএর কোনও প্রভাব নেই।

align-itemsসম্পত্তি অনুরূপ align-selfছাড়া এটা প্রযোজ্য আনমন পাত্রে ।

যেহেতু এটি liএকটি ফ্লেক্স ধারক, align-itemsতাই শিশু উপাদানগুলিকে উল্লম্বভাবে কেন্দ্র করতে ব্যবহার করা যেতে পারে।

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

কোডপেন ডেমো

---

প্রযুক্তিগতভাবে, এখানে কীভাবে align-itemsএবং কীভাবে align-selfকাজ করা ...

align-itemsসম্পত্তি (ধারক দিকে) ডিফল্ট মান সেট করে align-self(আইটেম উপর)। সুতরাং, align-items: centerমানে সমস্ত ফ্লেক্স আইটেম সেট করা হবে align-self: center।

তবে আপনি align-selfস্বতন্ত্র আইটেমগুলিতে সামঞ্জস্য করে এই ডিফল্টটিকে ওভাররাইড করতে পারেন ।

উদাহরণস্বরূপ, আপনি সমান উচ্চতার কলামগুলি চাইতে পারেন, তাই ধারকটি সেট করা আছে align-items: stretch। তবে, একটি আইটেম অবশ্যই শীর্ষে পিন করা উচিত, তাই এটি সেট করা আছে align-self: flex-start।

উদাহরণ

---

পাঠ্যটি কীভাবে একটি ফ্লেক্স আইটেম?

কিছু লোক হয়তো ভাবছেন যে কীভাবে পাঠানো একটি রান ...

<li>This is the text</li>

এর একটি শিশু উপাদান li।

কারণটি হ'ল যে পাঠ্যটি কোনও ইনলাইন-স্তরের উপাদান দ্বারা স্পষ্টভাবে মোড়ানো হয়নি তা একটি ইনলাইন বাক্স দ্বারা আলগোরিদিমভাবে মোড়ানো। এটি এটিকে অনামী ইনলাইন উপাদান এবং পিতামাতার সন্তান করে তোলে ।

সিএসএস স্পেস থেকে:

9.2.2.1 বেনামে ইনলাইন বাক্স

কোনও ব্লক ধারক উপাদানের ভিতরে সরাসরি থাকা যে কোনও পাঠ্য অবশ্যই বেনামে ইনলাইন উপাদান হিসাবে বিবেচিত হবে।

ফ্লেক্সবক্স স্পেসিফিকেশন অনুরূপ আচরণের জন্য সরবরাহ করে।

4. ফ্লেক্স আইটেম

ফ্লেক্স ধারকের প্রতিটি ইন-ফ্লো শিশু একটি ফ্লেক্স আইটেম হয়ে যায় এবং প্রতিটি ফ্লেক্স ধারকটির ভিতরে থাকা পাঠ্যের প্রতিটি মজাদার রান একটি বেনামি ফ্লেক্স আইটেমে আবৃত থাকে।

সুতরাং, এর পাঠ্যটি liএকটি নমনীয় আইটেম।

Comments

আমি চাই align-items: baseline। বিভিন্ন ইউনিকোড চর ইত্যাদি থেকে বিভিন্ন উচ্চতার জন্য ভাল

— ই

অজ্ঞাতনামা ইনলাইন বাক্সগুলির ধারণার ব্যাখ্যা এবং সংযোগের জন্য ধন্যবাদ ... সত্যিকারের স্পষ্ট করতে সহায়তা করতে পারে যে পরীক্ষার মাধ্যমে এবং ত্রুটির মাধ্যমে আপনি কিছু প্রভাব অর্জন করতে পারেন কেন তারা কাজ করে।

— স্কয়ারকাণ্ডি

Answer 2

ওপিতে পোস্ট করা নির্দিষ্ট সমস্যাটি সমাধান করার জন্য সর্বাধিক ভোট দেওয়া উত্তর , যেখানে inline-blockউপাদানটির (পাঠ্য) উপাদানটির অভ্যন্তরে আবৃত ছিল । কিছু ক্ষেত্রে ধারকটির অভ্যন্তরে উল্লম্বভাবে কোনও সাধারণ উপাদানকে কেন্দ্র করে রাখা হতে পারে , যা আমার ক্ষেত্রেও প্রযোজ্য, তাই এর জন্য আপনার যা যা প্রয়োজন তা হ'ল:

align-self: center;

Answer 3

সেরা পদক্ষেপটি হ'ল একটি ফ্লেক্সবক্সের অভ্যন্তরে একটি ফ্লেক্সবক্সকে বাসা বাঁধাই । সকল আপনাকে যা করতে হবে শিশু দিতে হয় align-items: center। এটি উল্লম্বভাবে তার পিতামাতার অভ্যন্তরে পাঠ্যটি প্রান্তিক করবে।

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

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

Comments

আপনি যদি একটি নিখুঁত কেন্দ্রিক পাঠ্য চান। text-align:centerএকা কাজ করে না align-items: centerএটি দিয়ে ব্যবহার করুন ।

— টজওয়েনি

Answer 4

ফলাফল

এইচটিএমএল

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

---

ব্যবহার করুন align-itemsপরিবর্তে align-selfআমি আরও যোগ করেছেন flex-directionকরতে column।

সিএসএস

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

Answer 5

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
 display: flex;
 justify-content: center;
 align-items: center;
 background: silver;
 width: 100%;
 height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Answer 6

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-items:center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

Comments

কোড-কেবল উত্তরগুলি খুব কার্যকর নয় ... মন্তব্যগুলি যুক্ত করুন বা আপনি কী করেছেন তার ব্যাখ্যা এবং এটি কেন কাজ করে।

— এলোমেলো_ ব্যবহারকারীর_নাম

Answer 7

display: flexআপনি ব্যবহার করে এইচটিএমএল উপাদানগুলির উল্লম্ব প্রান্তিককরণ নিয়ন্ত্রণ করতে পারেন।

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

Answer 8

আপনি ulএবং পরিবর্তন করতে liপারে tableএবং table-cell। তারপরে, vertical-alignআপনার জন্য কাজ করবে:

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK

Comments

আপনি সেখানে অন্য তালিকার আইটেম যোগ না করা পর্যন্ত ভাল কাজ করে।

— জর্জি

সত্য ... তবে এটি কখনই উল্লেখ করা হয়নি

— LcSalazar

আপনি লি এর পরিবর্তে উচ্চতায় চলে এসেছেন? প্রতিটি লি উচ্চতা তাই এই নয আমি তোমার দর্শন লগ করা ভীত ব্যবহার করতে পারে গতিশীল হতে হবে

— styler

@ LcSalazar আপনি কেবল একটি আইটেম রাখার ইচ্ছা থাকলে আপনি সাধারণত একটি তালিকা ব্যবহার করবেন না। ডিভগুলি এটাই।

— বেন ভিসনেস

আবার সত্য ... তবে আমি বলছি না এটি নিখুঁত দৃশ্য। আমি সবেমাত্র একটি সমাধান পোস্ট করেছি যা প্রশ্নের মতোই উত্তর দেয়। আমি আশা করি এই তথ্যটি অন্য কারও হাতে এসে পড়তে পারে যা এটি পড়ে এবং অন্যরকম দৃশ্য

— ধারণ করে