কিভাবে একটি উল্লম্বভাবে উপাদানগুলিকে সারিবদ্ধ করবেন?

Question

আমি দুটি ছবি এবং একটি সঙ্গে একটি ডিভি আছে h1। তাদের সকলকে একে অপরের পাশে ডিভের মধ্যে উল্লম্বভাবে সারিবদ্ধভাবে তৈরি করা দরকার।

চিত্রগুলির absoluteমধ্যে একটি ডিভের মধ্যে অবস্থান করা প্রয়োজন ।

সমস্ত সাধারণ ব্রাউজারে কাজ করার জন্য সিএসএসের কী প্রয়োজন?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

Comments

আমি উল্লম্ব সারিবদ্ধ করার সমস্ত পদ্ধতির একটি তালিকা তৈরি করেছি..আমি এটি এখানে রেখে যাচ্ছি: jsfiddle.net/techsin/FAwku/1

— মুহাম্মদ উমর

উল্লম্বভাবে, আনুভূমিকভাবে বা উভয় (খাঁটি সিএসএস) এর মধ্যে একটি উপাদানকে কেন্দ্র করার জন্য এখানে দুটি সহজ পদ্ধতি রয়েছে: স্ট্যাকওভারফ্লো.com

— মাইকেল বেঞ্জামিন

মার্জিন-শীর্ষ: অটো এবং মার্জিন-নীচে: অটো (অনেক ক্ষেত্রে ক্ষেত্রে কাজ করে)।

— 46

Answer 1

বাহ, এই সমস্যাটি জনপ্রিয়। এটি vertical-alignসম্পত্তিতে একটি ভুল বোঝাবুঝির ভিত্তিতে । এই চমৎকার নিবন্ধটি এটি ব্যাখ্যা করে:

vertical-alignগাভিন কিস্টনার দ্বারা বোঝা , বা উল্লম্বভাবে কেন্দ্রের বিষয়বস্তুতে "কীভাবে (নয়)" ।

"সিএসএসে কীভাবে কেন্দ্র করবেন" একটি দুর্দান্ত ওয়েব সরঞ্জাম যা বিভিন্ন পরিস্থিতিতে প্রয়োজনীয় সিএসএস কেন্দ্রিক বৈশিষ্ট্যগুলি খুঁজে পেতে সহায়তা করে।

---

সংক্ষেপে _{^{(এবং লিঙ্ক পচা রোধ করতে)}} :

• ইনলাইন উপাদানগুলি (এবং কেবল ইনলাইন উপাদানগুলি) এর মাধ্যমে তাদের প্রসঙ্গে উল্লম্বভাবে সারিবদ্ধ হতে পারে vertical-align: middle। তবে, "প্রসঙ্গ" পুরো প্যারেন্ট কনটেইনার উচ্চতা নয়, এটি যে পাঠ্য লাইনের সাথে রয়েছে সেগুলিই উচ্চতা j
• ব্লক উপাদানগুলির জন্য, উল্লম্ব প্রান্তিককরণ কঠোর এবং দৃ situation়ভাবে নির্দিষ্ট পরিস্থিতির উপর নির্ভর করে:
  • ভেতরের উপাদান একটি আছে করতে পারেন নির্দিষ্ট উচ্চতা , আপনি তার অবস্থান করতে পারেন absoluteএবং তার উল্লেখ height, margin-topএবং topঅবস্থান।jsfiddle উদাহরণ
  • যদি কেন্দ্রিক উপাদানটি একটি একক লাইন নিয়ে থাকে এবং এর প্যারেন্টের উচ্চতা স্থির হয় তবে আপনি কেবল line-heightতার ধারকতা পূরণের জন্য ধারকটি সেট করতে পারেন । এই পদ্ধতিটি আমার অভিজ্ঞতায় বেশ বহুমুখী। jsfiddle উদাহরণ
  • … এরকম আরও বিশেষ কেস রয়েছে।

Comments

"বৈধ" সমাধানগুলির সাথে সমস্যা (তাই নয় vertical-align: middle) হ'ল আপনাকে একটি নির্দিষ্ট উচ্চতা নির্দিষ্ট করতে হবে। প্রতিক্রিয়াশীল ওয়েব ডিজাইনের পক্ষে খুব সম্ভব নয় ।

— এমিলি

আমার এই কাঠামোটি ছিল: <ডিভিটি উচ্চতা = "## পিক্স"> আমার পাঠ্য </ div> আমার জন্য কাজ করেছেন বিভাগ উচ্চতার সম্পত্তি হিসাবে ব্যবহৃত একই মানটি ব্যবহার করে সম্পত্তি রেখাটি সেট করুন: '## পিক্স' (## কারণ এই মান আমার ক্ষেত্রে গতিশীল) আপনাকে ধন্যবাদ

— patricK

এটি inline-blockএবং table-cellউপাদানগুলির সাথেও কাজ করে। যদি আপনার এটি নিয়ে সমস্যা হয় line-heightতবে ধারক উপাদান (যেমন প্রসঙ্গ )টি সামঞ্জস্য করে দেখুন যেহেতু এটি vertical-alignলাইন বাক্স গণনায় ব্যবহৃত হয় ।

— অ্যালেক্স ডব্লু

css-tricks.com/centering-css-complete-guide <- এখানে কিছু ভাল বিকল্প উপস্থাপন করা হয়েছে, বেশিরভাগ সময় নিজেকে টেবিল / টেবিল-সেল সমাধানের আশ্রয় নিতে পেয়েছি

— শানুহসাইন

কারণ এটি বাক্সের ডান কাজ এই সরঞ্জামটি (howtocenterincsss.com) বেশ ভালো ভিতরে আমার বর্তমান সিএসএস! এটি অতি বিরল। পুরানো দিনগুলি মনে রাখুন যেখানে আপনাকে কিছু স্টাইলশীট কিছু উদাহরণ থেকে অনুলিপি করতে হয়েছিল, এমনকি কখনও কখনও এমনকি HTML এটির উদাহরণগুলি একে অপরের পরে অপরিবর্তিত করে পুনরায় নামকরণ করে যতক্ষণ না আমার প্রয়োজন হয়। এই সাইটের ক্ষেত্রে না!

— কনস্টান্টিন

Answer 2

এখন যেহেতু ফ্লেক্সবক্স সমর্থন বাড়ছে, এই সিএসএসটি যুক্ত উপাদানটিতে প্রয়োগ করা উল্লম্বভাবে অন্তর্ভুক্ত আইটেমটিকে কেন্দ্র করবে:

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

আপনার যদি এক্সপ্লোরার 10, এবং পুরাতন (<4.4) অ্যান্ড্রয়েড ব্রাউজারগুলি লক্ষ্য করতে হয় তবে প্রিফিক্সড সংস্করণটি ব্যবহার করুন:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Comments

একটি দুর্দান্ত সমাধান, আপনাকে ধন্যবাদ। অভ্যন্তরীণ উপাদানটি ধারকটির চেয়ে বড় আকারের ক্ষেত্রে, আপনি কীভাবে ফ্লেক্সবক্সকে একটি অনুভূমিক স্ক্রোলবার প্রদর্শন করবেন তা প্রস্তাব দিতে পারেন? (আমি পাওয়ারপয়েন্টে ক্যানভাসের মতো পাত্রের মধ্যে অভ্যন্তরীণ উপাদানকে ঝুমিয়ে / স্ক্রোলযোগ্য করার চেষ্টা করছি)? এটা কি আদৌ সম্ভব?

— বোরিস বুর্কভো

@ ইয়াজিড এরমান এই সমাধানটি ফ্লেক্সবক্সের উপর নির্ভর করে তাই না, কেবলমাত্র আইই 10 এবং উপরের সমর্থন বা অন্য কোনও আধুনিক ব্রাউজার caniuse.com/#search=flexbox ফ্লেক্সবক্স দুর্দান্ত যেখানে এটি সমর্থিত তবে এটি সর্বত্র নয়। ডিসপ্লে টেবিল এবং টেবিল ঘর সম্ভবত সত্যিই সর্বোত্তম সমাধান, ধারকটি কেবল সারণী হওয়া দরকার, উপাদানকে কেন্দ্র করে কেন্দ্রে একটি উপাদানকে প্রদর্শন টেবিল কোষের সাথে আবৃত করা হয় তবে অন্য কিছু উত্তর এখানে যেমন উল্লেখ করা যায় ঠিক তেমনই এটি কেন্দ্র করতে পারে।

— শানুহসাইন

কেন এটি আমার পক্ষে খুঁজে পাওয়া এত কঠিন ছিল> <উত্তরের জন্য ধন্যবাদ! এটি নিশ্চিত করতে পারে যে এটি আমার জন্য এমন দৃশ্যে কাজ করছে যেখানে অন্যান্য উত্তর কাজ করে না।

— মাইকেল ম্যাককেনা

দরকারী সিএসএস ঠাট flexbox উপর নির্দেশিকা তারপর তাকান align-itemsঅধ্যায়

— icc97

2020 এ আমরা ফ্লেক্সবক্স caniuse.com/#feat=flexbox

— টনিগাত্তা

Answer 3

আমি এই খুব সাধারণ কোড ব্যবহার করেছি:

এইচটিএমএল:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

সিএসএস:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

স্পষ্টতই, আপনি একটি .classবা একটি ব্যবহার করুন #id, ফলাফল পরিবর্তন হবে না।

Comments

সারিবদ্ধকরণের সমস্ত নয়টি সম্ভাবনার সম্পূর্ণ উদাহরণ (শীর্ষ-মধ্য-নীচের এবং বাম-কেন্দ্র-ডান): jsfiddle.net/webMac/0swk9hk5

— ওয়েবম্যাক

2020 এ আমরা ফ্লেক্সবক্স caniuse.com/#feat=flexbox ব্যবহার করতে পারি

— টনিগাট্টা

আমার জন্য নিখুঁত কাজ করে

— huynq0911

Answer 4

এটি আমার পক্ষে কাজ করেছে:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

Comments

সুতরাং এটি আর "ব্লক" উপাদান নেই?

— পেসারিয়ার

তারপরে আপনি যদি আনুভূমিকভাবে সারিবদ্ধ করতে চান তবে margin : 0 autoএটি কারণ কাজ করবে নাdisplay: table-cell

— অরটোমালা লোকনি

Answer 5

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Comments

আমি মনে করি এই সমাধানটি বোঝার জন্য দ্রুত এবং সহজ। সম্ভবত এটি কারণ আমি নির্বাচিত উত্তরটি ছাঁটাই করতে যথেষ্ট ধৈর্যশীল ছিলাম না। সব কিছু ফ্লেক্সবক্স!

— Modulitos

যোগে justify-content: centerঅনুভূমিক কেঁদ্রীকরণ আমার অভাব সংশোধন

— স্যামুয়েল Slade,

Answer 6

আমার এক বন্ধুর কাছ থেকে একটি কৌশল:

এইচটিএমএল:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

সিএসএস:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

এখানে ডেমো

Comments

এই কৌশলটি এখানে আরও বিশদে বর্ণনা করা হয়েছে: css-tricks.com/centering-in-the-unعلوم

— নার্দি

Answer 7

কেন্দ্রে ব্লক উপাদানগুলি অবস্থান করতে (আই 9 এবং তার উপরের কাজ করে), একটি মোড়কের প্রয়োজন div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Comments

উপাদানটি "অর্ধ পিক্সেল" এ রাখার কারণে এই পদ্ধতিটি উপাদানগুলিকে ঝাপসা হতে পারে। এর একটি সমাধান হল উপাদানটির দৃষ্টিভঙ্গি নির্ধারণ করা। রূপান্তর: পরিপ্রেক্ষিত (1px) অনুবাদ Y (-50%);

— সাইমন

Answer 8

তাদের সকলকে ডিভের মধ্যে উল্লম্বভাবে সারিবদ্ধ করা দরকার

সংযুক্ত কিভাবে ? চিত্রগুলির শীর্ষগুলি পাঠ্যের শীর্ষের সাথে একত্রিত?

চিত্রগুলির মধ্যে একটি ডিভের মধ্যে নিখুঁত অবস্থানে থাকা দরকার।

একেবারে ডিআইভির সাথে আপেক্ষিকভাবে অবস্থিত? আপনি যা খুঁজছেন তা সম্ভবত স্কেচ করতে পারতেন ...?

fd নিখুঁত অবস্থানের পদক্ষেপগুলি বর্ণনা করেছে, পাশাপাশি H1উপাদানগুলির প্রদর্শনটি সামঞ্জস্য করার সাথে এটির সাথে চিত্রগুলি ইনলাইন উপস্থিত হবে। এটিতে, আমি যুক্ত করব যে আপনি vertical-alignস্টাইলটি ব্যবহার করে চিত্রগুলি সারিবদ্ধ করতে পারেন :

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... এটি শীর্ষ প্রান্ত সারিবদ্ধভাবে শিরোনাম এবং চিত্রগুলি একসাথে রাখবে। অন্যান্য সারিবদ্ধ বিকল্প বিদ্যমান; ডকুমেন্টেশন দেখুন । আপনি ডিআইভিটি ফেলে দেওয়া এবং চিত্রগুলিকে H1উপাদানটির অভ্যন্তরে স্থানান্তরিত করাও উপকারী বলে মনে করতে পারেন - এটি ধারকটির অর্থগত মান প্রদান করে এবং এর প্রদর্শনটি সামঞ্জস্য করার প্রয়োজনীয়তা সরিয়ে দেয় H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Answer 9

এই সূত্রটি ব্যবহার করুন এবং এটি সর্বদা ফাটল ছাড়া কাজ করবে:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Comments

আমি এই ধরণের নির্বাচক "# উচ্চতর [আইডি]" সিএসএসে কখনও দেখিনি। এটা কি করা উচিত? আইডির পরিবর্তে আমার কি ক্লাস হবে?

— আলেক্সা অ্যাড্রিয়ান

Answer 10

প্রায় সমস্ত পদ্ধতির উচ্চতা নির্দিষ্ট করা প্রয়োজন, তবে প্রায়শই আমাদের কোনও উচ্চতা থাকে না।
সুতরাং এখানে একটি CSS3 3 লাইন কৌশল যা উচ্চতা জানতে প্রয়োজন হয় না।

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

এটি আইই 9 তে সমর্থিত।

এর বিক্রেতা উপসর্গ সহ:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

সূত্র: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Comments

তবে এটি তখনই কার্যকর মনে হয় যখন উপাদানটির পিতামাতার উচ্চতা স্থির থাকে। শতাংশ মান সহ সম্পত্তি 'শীর্ষ' কেবল স্থির উচ্চতার সাথে ধারকটিতে কাজ করে, সঠিক?

— ucdream

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

— শাদোয়েব

Answer 11

দুটি উপায়ে, আপনি উপাদানগুলি উল্লম্ব এবং অনুভূমিকভাবে সারিবদ্ধ করতে পারেন

1. বুটস্ট্র্যাপ 4
2. সিএসএস 3

1. বুটস্ট্র্যাপ 4.3.X

উল্লম্ব সারিবদ্ধ জন্য: d-flex align-items-center

অনুভূমিক প্রান্তিককরণের জন্য: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. সিএসএস 3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}

<div class="container">
  <div class="child">I am in Center</div>
</div>

Comments

উভয় পদ্ধতিই মূলত একই কারণ বুটস্ট্র্যাপ তার ক্লাসে একই ফ্লেক্স বৈশিষ্ট্য ব্যবহার করে।

— এমএক্স

বুটস্ট্র্যাপ যাদু নয়। এটি সবাইকে প্রভাবিত করে এমন একই সিএসএস সীমাবদ্ধতার সাপেক্ষে। এটি औसत থেকে এটি কী করে তা লুকিয়ে রাখছে। ব্যবহারকারী।

— জেসনজেনএক্স

Answer 12

আমার কৌশলটি ডিভের ভিতরে 1 সারি এবং 1 কলাম সহ একটি টেবিল স্থাপন করা, প্রস্থ এবং উচ্চতার 100% সেট করা এবং সম্পত্তি উল্লম্ব-সারিবদ্ধ: মাঝখানে করা।

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

ফিডল: http://jsfiddle.net/joan16v/sbqjnn9q/

Comments

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

— কোকোডোকো

Answer 13

প্যারেন্ট ডিভিতে সেন্টার চাইল্ড ডিভ করার 3 টি উপায়

• সম্পূর্ণ পজিশনিং পদ্ধতি
• ফ্লেক্সবক্স পদ্ধতি

• রূপান্তর / অনুবাদ পদ্ধতি

  

  ডেমো

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Answer 14

উল্লম্ব কেন্দ্রে সিএসএস ব্যবহার করে, আপনি বাইরের পাত্রে একটি টেবিলের মতো কাজ করতে এবং সামগ্রীটি একটি টেবিল ঘর হিসাবে দিতে পারেন। এই ফর্ম্যাটে আপনার অবজেক্টগুলি কেন্দ্রিক থাকবে। :)

আমি উদাহরণের জন্য জেএসফিডেলে একাধিক বস্তু নেস্ট করেছি, তবে মূল ধারণাটি এরকম:

এইচটিএমএল

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

সিএসএস

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

একাধিক বস্তুর উদাহরণ:

এইচটিএমএল

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

সিএসএস

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

ফলাফল

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Answer 15

ডিফল্টরূপে এইচ 1 হ'ল একটি ব্লক উপাদান এবং প্রথম ইমগের পরে লাইনটিতে রেন্ডার হবে এবং দ্বিতীয় ইমগটি ব্লকের নীচে লাইনে উপস্থিত হবে।

এটি হওয়া থেকে বিরত রাখতে আপনি এইচ 1 টি ইনলাইন প্রবাহ আচরণ করতে সেট করতে পারেন:

#header > h1 { display: inline; }

সম্পূর্ণরূপে ডিভির ভিতরে ইমগের অবস্থান নির্ধারণের জন্য, সঠিকভাবে কাজ করার আগে আপনার "ডিভাইসটি" একটি "জ্ঞাত আকার" রাখতে সেট করে রাখতে হবে। আমার অভিজ্ঞতায় আপনার ডিফল্ট - অবস্থান থেকেও দূরে অবস্থানের বৈশিষ্ট্যটি পরিবর্তন করতে হবে: আপেক্ষিক আমার পক্ষে কাজ করে:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

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

হালনাগাদ:

ফায়ারফক্স 3 এ কাজ করে এমন একটি সম্পূর্ণ উদাহরণ এখানে দেওয়া হয়েছে:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

Comments

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

— মাইক টোনিক্লিফ

আমি ব্রাউজারগুলির মধ্যে কোনও ধারাবাহিকতা 'প্রত্যাশা' করব না .. নিশ্চিত হওয়ার একমাত্র উপায় হচ্ছে পরীক্ষা করা: /

— কোকোওয়ালা

Answer 16

আমরা উপাদানটির আকার গণনা করতে একটি সিএসএস ফাংশন গণনা ব্যবহার করতে পারি এবং তারপরে সেই অনুযায়ী শিশু উপাদানকে অবস্থান দিতে পারি।

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

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

এবং সিএসএস:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

ডেমো এখানে তৈরি হয়েছে: https://jsfiddle.net/xnjq1t22/

এই সমাধানটি প্রতিক্রিয়াশীল div heightএবং widthপাশাপাশি ভাল কাজ করে।

দ্রষ্টব্য: পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যের জন্য ক্যালক ফাংশনটি পরীক্ষা করা হয় না।

Answer 17

আজকের হিসাবে, আমি সিএসএস 3 ব্যবহার করে একটি ডিভিতে উল্লম্বভাবে একাধিক পাঠ্য-রেখাগুলি একত্রীকরণের জন্য একটি নতুন কাজের সন্ধান পেয়েছি (এবং আমি ইউআইটি সাজানোর জন্য বুটস্ট্র্যাপ ভি 3 গ্রিড সিস্টেমটিও ব্যবহার করছি), যা নীচে রয়েছে:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

আমার বোঝাপড়া অনুসারে, উপাদান সহ পাঠ্যের তাত্ক্ষণিক পিতামাতার কিছু উচ্চতা থাকতে হবে। আমি আশা করি এটি আপনাকেও সহায়তা করবে। ধন্যবাদ!

Comments

খুব পরিষ্কার সমাধান। এই আমার জন্য সুন্দরভাবে কাজ করেছে।

— আকালোন্ডা

Answer 18

এটি করার জন্য আমার নতুন প্রিয় উপায়টি একটি সিএসএস গ্রিড সহ:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Answer 19

ডিভের ভিতরে কেবল একটি এককক্ষের টেবিল ব্যবহার করুন! কেবলমাত্র ঘর এবং টেবিলের উচ্চতা এবং 100% দিয়ে সেট করুন এবং আপনি উল্লম্ব-সারিবদ্ধ ব্যবহার করতে পারেন।

ডিভের অভ্যন্তরে একটি এককক্ষের টেবিলটি উল্লম্ব-সারিবদ্ধ পরিচালনা করে এবং প্রস্তর যুগের সাথে পিছনে সামঞ্জস্যপূর্ণ!

Answer 20

আমি এক বছরেরও বেশি সময় থেকে নিম্নলিখিত সমাধানগুলি (কোনও অবস্থান এবং কোনও লাইন উচ্চতা ছাড়াই) ব্যবহার করে আসছি, এটি IE 7 এবং 8 এর সাথেও কাজ করে।

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Answer 21

এটি একটি ডিভের অভ্যন্তরে আই উপাদানটির জন্য আমার ব্যক্তিগত সমাধান

জেএসফিডাল উদাহরণ

এইচটিএমএল

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

সিএসএস

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Answer 22

আমার জন্য, এটি এইভাবে কাজ করেছে:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

বুটস্ট্র্যাপ ক্লাস ব্যবহার করে "একটি" উপাদানটি একটি বোতামে রূপান্তরিত হয় এবং এটি এখন উল্লম্বভাবে বাইরের "ডিভ" এর অভ্যন্তরে কেন্দ্রীভূত হয়।

Answer 23

ডিসপ্লে ফ্লেক্স ব্যবহার করে প্রথমে আপনাকে যে আইটেমটি সারিবদ্ধ করতে চান তার ধারকটি মোড়ানো দরকার।

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

তারপরে নীচের সিএসএসটি আমার উদাহরণে মোড়ক ডিভি বা আউটডিভের জন্য প্রয়োগ করুন

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}

Comments

কোড শুধুমাত্র উত্তর নিরুৎসাহিত করা হয়। এটি কীভাবে সমস্যাটি সমাধান করে বা বিদ্যমান উত্তরগুলির থেকে এটি কীভাবে পৃথক হয় সে সম্পর্কে কিছু ব্যাখ্যা যুক্ত করুন। পর্যালোচনা থেকে

— নিক

Answer 24

শুধু এটা:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

ডিভের অভ্যন্তরে একটি এককক্ষের টেবিলটি উল্লম্ব-সারিবদ্ধ পরিচালনা করে এবং প্রস্তর যুগের সাথে পিছনে সামঞ্জস্যপূর্ণ!

Answer 25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Answer 26

এখানে অন্য একটি (প্রতিক্রিয়াশীল) পদ্ধতির:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Answer 27

আমি একটি নেট নেটওয়ার্ক যিনি সবেমাত্র ওয়েব প্রোগ্রামিংয়ে প্রবেশ করেছেন। আমি সিএসএস ব্যবহার করিনি (ভাল, কিছুটা)। আমি jQuery এর .css ফাংশন সহ উল্লম্ব কেন্দ্রীকরণ সম্পন্ন করতে একটি সামান্য জাভাস্ক্রিপ্ট ব্যবহার করেছি।

আমি আমার পরীক্ষা থেকে সব কিছু পোস্ট করছি। এটি সম্ভবত অতিরিক্ত মার্জিত নয়, তবে এটি এখনও পর্যন্ত কাজ করে।

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

Comments

আপনি নতুন ওয়েব বিকাশকারীকে কীভাবে কীভাবে ভুল করবেন তা শিখিয়ে চলেছেন, এইচটিএমএল বিষয়বস্তু সংজ্ঞায়িত করার জন্য, সিএসএস এইচটিএমএল স্টাইল করার জন্য এবং জাভাস্ক্রিপ্ট শর্তের উপর নির্ভর করে রানটাইম উভয় ক্ষেত্রেই ম্যানিপুলেট করার জন্য।

— এগুলিকে

Answer 28

<div id="header" style="display: table-cell; vertical-align:middle;">

...

বা সিএসএস

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

ব্রাউজারের কভারেজ

Comments

উল্লম্ব-সারিবদ্ধ সম্পত্তি প্রযোজ্য হবে না যেহেতু ডিভ প্রদর্শিত হয়: ডিফল্টরূপে ব্লক করুন এবং এটি পরিবর্তন করার জন্য কিছুই করা হয়নি বলে মনে হয়।

— কোয়ান্টিন

স্পষ্টতই প্রদর্শনটি আপডেট হয়েছিল table-cell, যা vertical-align: middle;কাজ করে। আরও ভাল, এটি নেস্টেড মোড়ক / বাফার ডিভের প্রয়োজন ছাড়াই কাজ করে এবং এটি পাঠ্য এবং চিত্র উভয় (বা উভয়) এর জন্য কাজ করে এবং আপনার অবস্থানের বৈশিষ্ট্যগুলি পরিবর্তন করার দরকার নেই।

— এমএসপ্রেজ

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

— টেক্সাসব্রুস

হ্যাঁ, যতদূর আমি জানি এটি একটি ডিভের মধ্যে উল্লম্বভাবে যে কোনও কিছুকে কেন্দ্র করার সবচেয়ে কম অন্তর্নিহিত উপায়। +1

— পিএমএ

ঠিক আছে, সম্ভবত আমি আমার উপসংহার সাথে খুব দ্রুত ছিলাম ... প্রদর্শন যুক্ত করা হচ্ছে: টেবিল-সেল ব্রেক ডিভ মার্জিন এবং অতিরিক্ত সীমানা ডিভের বাইরে প্রদর্শিত হয়, সীমানা-ব্যাসার্ধের সাথে মিলিত সীমানা বাইরের ডিস্ট আইস্টের ভিতরে গোলাকার কোণগুলি প্রদর্শন করে

— পিএমএ