উল্লম্ব-সারিবদ্ধ কেন: মাঝখানে আমার স্প্যান বা ডিভের উপর কাজ করছে না?

Question

আমি অন্য উপাদানগুলির মধ্যে উল্লম্বভাবে একটি spanবা divউপাদানকে কেন্দ্র করার চেষ্টা করছি div। তবে আমি যখন রাখি তখন vertical-align: middleকিছুই হয় না। আমি displayউভয় উপাদানের বৈশিষ্ট্য পরিবর্তন করার চেষ্টা করেছি এবং কিছুই কাজ করছে বলে মনে হচ্ছে না।

আমি বর্তমানে আমার ওয়েবপৃষ্ঠায় এটি করছি:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

বাস্তবায়নের একটি jsfiddle এখানে দেখায় যে এটি কাজ করে না: http://jsfiddle.net/gZXWC/

Answer 1

এটি সর্বোত্তম উপায় বলে মনে হচ্ছে - আমার মূল পোস্টের পরে কিছু সময় কেটে গেছে এবং এটি এখনই করা উচিত: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Comments

তাহলে ওপি যা করতে চায় তা কীভাবে কেউ করে?

— রায়ান মর্টেনসেন

পরিবর্তনশীল লাইন অনুচ্ছেদে কোনও ধারণা? অর্থাত। এটি এক বা দুটি লাইন হবে কিনা তা জানার কোনও উপায় না থাকলে। আমি কি তখন jQuery ব্যবহারকারীর প্রয়োজন?

— ফুচো

উচ্চতা অবশ্যই গতিশীল হতে হবে, তবে এর সমাধান কী?

— মুরহফ সোসালি

গ্রহণযোগ্য উত্তর হওয়া উচিত নয়, 'ইনার'-এর উচ্চতা জানার উপর নির্ভর করে, সুতরাং ওপি যা চেয়েছিল ঠিক তাই নয় এবং নীচে কিছুটা আরও ভাল উত্তর নীচে @timbergus বা টিম পারকিন্সের উত্তরগুলি দেখুন।

— মাইক-উত্স

@ মাইক-উত্সটি অভ্যন্তরের উচ্চতা জেনে 100% সম্ভব তবে উচ্চতাটি গতিশীল হলেও যেহেতু জাভাস্ক্রিপ্টের কিছুটা অংশ এটি নির্ধারণ করতে পারে এবং গতিশীলভাবে সেই ডিওএম অবজেক্টের জন্য সিএসএস নিয়মটি পরিবর্তন করতে পারে।

— চার্লস অ্যাডিস

Answer 2

CSS3 ব্যবহার করে:

<div class="outer">
   <div class="inner"/>
</div>

CSS:

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

দ্রষ্টব্য: এটি পুরানো আই এর মধ্যে কাজ করবে না

Comments

এটি সমস্ত বড় আধুনিক ব্রাউজার এবং সহজতম এবং পরিষ্কার সমাধান দ্বারা সমর্থিত।

— স্যাম

এছাড়াও মনে রাখা inline-flexভেতরের উপাদান ভিতরে একটি সারিতে একাধিক উপাদানের আছে।

— ড্যান নিসেনবাউম

আমার ক্ষেত্রে, যেহেতু আমি .inner এর সামগ্রীটি অনুভূমিকভাবেও কেন্দ্র করতে চেয়েছিলাম, তাই আমাকে যুক্ত করতে হয়েছিল .inner { width: 100%; }। এইভাবে, দেখে মনে হচ্ছে .outer { display: table; } .inner { display: table-cell; vertical-align: middle; }এটি কোনও ন্যূনতম প্রস্থকে বাধ্য না করেই কাজ করে ।

— বার্ট এস

আমি justify-content: center;অনুভূমিকভাবে সারিবদ্ধ করতাম যা দুর্দান্ত কাজ করেছে

— রূথ ইয়ং

Answer 3

এটি চেষ্টা করুন, আমার জন্য খুব ভাল কাজ করে:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Comments

দুর্দান্ত উত্তর, এটি আমাকে পুরোপুরি কার্যকর সমাধান দিয়েছে যা অন্যান্য নক-অন সমস্যাগুলির কারণ তৈরি করে না (জ্যাকোরিমোবাইল + ফোনগ্যাপ ব্যবহার করে এমন অ্যাপ্লিকেশন এবং অন্যান্য সমস্ত সমাধান সিএসএস ও ডিভ সাইজিংয়ের সমস্যাগুলির দিকে পরিচালিত করে)। কেবলমাত্র উল্লেখ করতে যে এই পরামিতিগুলি কেন্দ্রিক / মিশ্রিত করার জন্য উপাদানগুলির নির্দিষ্ট কোনও সিএসএস ব্লকে যুক্ত করতে হবে, উদাহরণস্বরূপ: #element span {height:100%;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}- স্প্যানটি তার ধারকটির পুরো উচ্চতা (সম্ভবত একটি ডিভ) উত্তরাধিকার সূত্রে প্রাপ্ত তা নিশ্চিত করার জন্য উচ্চতাটি গুরুত্বপূর্ণ আপনি এখনও উল্লম্ব কেন্দ্রিং পাবেন না!

— অ্যান্ডি লরেঞ্জ

BTW, আপনি ব্রাউজার উপসর্গ ছাড়া মান flexbox কোড লিখতে পারেন এবং তারপর ব্রাউজার autoprefixer প্রিফিক্স পেতে github.com/postcss/autoprefixer বা অনলাইন ডেমো মাধ্যমে simevidas.jsbin.com/gufoko/quiet

— starikovs

অবৈধ সম্পত্তি মান boxমধ্যেdisplay

— Joaquinglezsantos

এছাড়াও, বাইরের বাক্সে প্যাডিং থাকাকালীন @ ব্যবহারকারীর 1782556 এর উত্তর আরও ভাল কাজ করে।

— অায়োমেশন

Answer 4

লাইন-উচ্চতাটিকে ডিভ সমেত যেমন একই উচ্চতায় সেট করাও কাজ করবে

ডেমো http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Comments

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

— চার্লস অ্যাডিস

হ্যাঁ লাইন-উচ্চতা কৌশলটি ভালভাবে কাজ করে তবে কেবল যদি আপনার একক-লাইনের সামগ্রী থাকে। অতিরিক্ত লাইনগুলি হারিয়ে যাবে / ধারকটির বাইরে ছড়িয়ে পড়বে এবং আপনাকে আবার শুরু করতে হবে!

— অ্যান্ডি লরেঞ্জ 22

ক) line-heightঅভ্যন্তরীণ উপাদানের উচ্চতাও পরিবর্তন করবে। খ) অভ্যন্তরীণ উপাদানটি এখনও নিখুঁতভাবে উল্লম্বভাবে কেন্দ্রিক নয়। গ) এটি যে উপাদানগুলিতে পাঠ্য ধারণ করে না, যেমন: উদাহরণস্বরূপ: <img>বা নির্দিষ্ট উচ্চতা সহ উপাদানগুলিতে কাজ করে না ।

— আল্ফ.দেব

এটি ফন্ট-রেন্ডারিং পার্থক্যের কারণে ক্রস-ওএস (উইন্ডোজ / ম্যাক) কেও ব্যর্থ করতে পারে

— লোকালপিসিগুয়ে

এটি খুব অনাকাঙ্ক্ষিত এবং প্রায়শই ধারকটিতে অতিরিক্ত উচ্চতার ফলাফল হয়।

— আনডিস্ট্রাকশন

Answer 5

যদি আপনি flexbox ... প্লেস উপর নির্ভর করতে পারে না .childবা .parentএর কেন্দ্র। যখন পিক্সেল আকারগুলি অজানা (অন্যথায়, সর্বদা) এবং IE9 + তে কোনও সমস্যা না হয় তখন কাজ করে।

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Comments

এটি আসলে সর্বাধিক সম্পাদিত সমাধান, বিশেষত যেহেতু আমি এখনও পর্যন্ত দেখা বেশিরভাগ প্রকল্পগুলির জন্য আই 99 সামঞ্জস্য প্রয়োজন

— জ্যাবারওয়কি

Answer 6

আপনার বাহ্যিক উপাদান নয়vertical-align: middle , ভিতরের উপাদানটি লাগানো উচিত । বাহ্যিক উপাদানের মিলের জন্য বাহ্যিক উপাদানের উপর সম্পত্তি সেট করুন । তারপর সেট এবং ভিতরের উপাদানের উপর। এটি করার মাধ্যমে, অভ্যন্তরের উপাদানটির পাঠ্যটি একটি সাধারণ রেখা-উচ্চতার সাথে আবৃত হবে। Chrome, ফায়ারফক্স, সাফারি এবং IE 8+ এ কাজ করেline-heightheightdisplay: inline-blockline-height: normal

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

বেহালা

Comments

এটি সম্ভবত সবচেয়ে সহজ উপায় ... এই পৃষ্ঠায় থাকা অন্য সমস্ত উত্তর অযৌক্তিকভাবে ক্লঙ্কি / হ্যাকি বা পুরানো ব্রাউজারগুলিতে সমর্থিত নয় বা অভ্যন্তরীণ উপাদানটির উচ্চতা জানার উপর নির্ভর করুন। আপনার আসলে দরকার নেই line-height: normal;এবং display:inline;খুব কাজ করে। এই পদ্ধতির বোনাস হ'ল এটি হস্তক্ষেপ করে না text-align:center;, যা ব্যবহার করে display: table-cell;সমস্যা তৈরি করতে পারে। বেশিরভাগ সময় আমরা অনুভূমিক পাশাপাশি পাশাপাশি উল্লম্বভাবে সারিবদ্ধ করতে চাই। এই সম্পাদিত ফিডলটি

— মাইক-উত্স

@ মাইক-উত্সটি ব্যবহারের কারণ line-height: normalএবং display: inline-blockএটি যাতে অভ্যন্তরীণ পাঠ্যটি সঠিকভাবে মোড়বে। যদি আপনি নিশ্চিত হন যে অভ্যন্তরীণ ডিভের পাঠ্যটি কখনই মোড়বে না তবে এই বৈশিষ্ট্যগুলি প্রয়োজনীয় হবে না।

— টিম পার্কিনস

যখন থেকে মাইক্রোসফ্ট আইই এর পুরানো সংস্করণগুলির সমর্থন সমর্থন করে আমি এই ধরণের জিনিসটির জন্য ফ্লেক্সবক্স ব্যবহার করেছি (@ ব্যবহারকারী 17882556 প্রস্তাবিত হিসাবে)। আমার যদি এখনও 10 বা ততোধিক বয়স্ককে সমর্থন করতে হয় তবে আমার আসল উত্তরটি যাওয়ার উপায়।

— টিম পার্কিনস

100% সম্মত, তবে আমি ব্যক্তিগতভাবে কেবল এখনও ফ্লেক্স বাক্সে যাব না, কেবলমাত্র 2016% মে ব্রাউজারগুলি মে 2016 এর সম্পূর্ণরূপে এটি সমর্থন করে (যদি আপনি আংশিক সমর্থন অন্তর্ভুক্ত করেন তবে 94%) দেখুন: caniuse.com/#search=flexible% 20box । এটি আপনার ব্যবহারকারীর ভিত্তির উপর নির্ভর করে যদিও সবচেয়ে বুদ্ধিমান বিকল্প হওয়ার খুব কাছাকাছি চলেছে।

— মাইক-উত্স

Answer 7

আমি এটি কারও সাহায্য করার ক্ষেত্রে মোড়ক ডিভের কেন্দ্রে সবকিছু সারিবদ্ধ করার জন্য ব্যবহার করেছি - আমি এটিকে সবচেয়ে সহজ বলে মনে করেছি:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Answer 8

এখানে আপনার উল্লম্ব সারিবদ্ধকরণের দুটি উপায়ের একটি উদাহরণ রয়েছে। আমি তাদের ব্যবহার করি এবং তারা বেশ ভাল কাজ করে। এর মধ্যে একটি পরম অবস্থান এবং অন্যটি ফ্লেক্সবক্স ব্যবহার করছে ।

উল্লম্ব সারিবদ্ধ উদাহরণ

ফ্লেক্সবক্স ব্যবহার করে, আপনি নিজেই একটি উপাদানটিকে অন্য উপাদানের সাথে display: flex;ব্যবহার করে সারিবদ্ধ করতে পারেন align-self। আপনার কাছে অনুভূমিকভাবে এটা সারিবদ্ধ করার প্রয়োজন হলে, আপনি ব্যবহার করতে পারেন align-itemsএবং justify-contentকন্টেইনারে।

আপনি যদি ফ্লেক্সবক্স ব্যবহার করতে না চান তবে আপনি অবস্থানের সম্পত্তিটি ব্যবহার করতে পারেন। আপনি যদি ধারকটিকে আপেক্ষিক এবং সামগ্রীটিকে নিখুঁত করে তোলেন তবে সামগ্রীটি ধারকটির ভিতরে অবাধে স্থানান্তরিত করতে সক্ষম হবে। সুতরাং আপনি যদি ব্যবহার করেন top: 0;এবং left: 0;সামগ্রীটিতে থাকেন তবে এটি ধারকটির উপরের বাম কোণে অবস্থান করবে।

তারপরে, এটি সারিবদ্ধ করার জন্য, আপনাকে কেবল শীর্ষ এবং বাম রেফারেন্সগুলি 50% এ পরিবর্তন করতে হবে। এটি সামগ্রীর উপরের বাম কোণ থেকে ধারক কেন্দ্রে সামগ্রীটি স্থাপন করবে।

সুতরাং আপনার লিখিত সামগ্রীটি অর্ধ আকারের বাম এবং শীর্ষে অনুবাদ করে এটি সংশোধন করতে হবে।

Answer 9

এখানে ভেটিকাল সারিবদ্ধকরণের একটি দুর্দান্ত নিবন্ধটি এখানে .. আমি ভাসমান উপায় পছন্দ করি।

http://www.vanseodesign.com/css/vertical-centering/

এইচটিএমএল:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

এবং সম্পর্কিত শৈলী:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

Comments

আমি মনে করি আপনি # ইনার ব্লকের উচ্চতা নির্ধারণ করলে এটি যথাযথ উল্লম্ব কেন্দ্রের ধারণাটিকে অকার্যকর করে দেয়। ওপিএস এটিকে স্বয়ংক্রিয়ভাবে তৈরি করতে বলছিল, তাই আমি ধারণা করব যে অভ্যন্তরীণ বাক্সটির উচ্চতা ধারণার সময় জানা যায় না।

— অ্যালেক্সিস উইল্কে

Answer 10

এইচটিএমএল

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

সিএসএস

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

আমরা পিতামাতার ডিভকে একটি টেবিল হিসাবে প্রদর্শন করতে এবং শিশু ডিভকে একটি সারণী-ঘর হিসাবে প্রদর্শন করতে সেট করি। তারপরে আমরা শিশু ডিভের উপর উল্লম্ব-সারিবদ্ধ ব্যবহার করতে পারি এবং এর মানটিকে মাঝখানে সেট করতে পারি। এই শিশু ডিভের ভিতরে যে কোনও কিছুই উলম্বভাবে কেন্দ্রিক হবে।

Answer 11

ইহা সহজ. শুধু display:table-cellআপনার প্রধান ক্লাসে যোগ করুন ।

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

এই jsfiddle দেখুন !

Answer 12

এখানে সর্বশেষতম সহজ সমাধান - কোনও পরিবর্তন করার দরকার নেই, আপনার ডিভের যে ধারকটি কেন্দ্র করতে চান সেখানে কেবলমাত্র তিনটি লাইন সিএসএস বিধি যুক্ত করুন। আমি Flex Box# লভফ্লেক্সবক্সকে ভালবাসি

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

বোনাস

justify-contentমান নিম্নলিখিত কয়েকটি অপশন সেট করা যেতে পারে:

• flex-start, যা শিশু ডিভকে তার পাত্রে ধারকটিতে ফ্লেক্স প্রবাহ শুরু করার সাথে সংযুক্ত করবে। এক্ষেত্রে এটি শীর্ষে থাকবে।

• center, যা শিশু ডিভটিকে তার মূল পাত্রে কেন্দ্রে স্থাপন করবে। এটি সত্যই ঝরঝরে, কারণ বাচ্চাদের কেন্দ্রে রাখার জন্য প্যারেন্ট পাত্রে র‌্যাপারটি রাখার জন্য আপনাকে সমস্ত বাচ্চার চারপাশে জড়ানোর জন্য অতিরিক্ত ডিভ যুক্ত করার দরকার নেই। যে কারণে, এই হল সত্য উল্লম্ব কেন্দ্র (ইন column flex-direction। একইভাবে, যদি আপনি পরিবর্তন flow-directionকরতে row, এটা অনুভূমিকভাবে কেন্দ্রীভূত হয়ে যাবে।

• flex-end, যা তার পিতামাত্রের ধারকটিতে ফ্লেক্স প্রবাহ শেষ হয় যেখানে শিশু ডিভটিকে সারিবদ্ধ করবে। এই ক্ষেত্রে, এটি নীচে চলে যাবে।

• space-between, যা প্রবাহের শুরু থেকে প্রবাহের শেষ পর্যন্ত সমস্ত বাচ্চাকে ছড়িয়ে দেবে। যদি ডেমো হয় তবে আমি অন্য একটি শিশু ডিভ যুক্ত করেছি যাতে তারা ছড়িয়ে পড়ে are

• space-aroundএর মতো space-between, তবে প্রবাহের শুরু এবং শেষের অর্ধেক জায়গার সাথে।

Comments

নিখুঁত সমাধান. বেমানান ব্রাউজারগুলি সামগ্রীটি আন-স্বাক্ষরযুক্ত নিতে পারে এবং ব্যবহারকারীর অবশ্যই এটির সাথে ডিল করতে হবে বা তার ব্রাউজারটি আপগ্রেড করতে হবে।

— twojr

Answer 13

যেহেতু একটিতে vertical-alignপ্রত্যাশিতভাবে কাজ করে td, আপনি এর সামগ্রীতে প্রান্তিককরণের জন্য একটি একক কোলে tableরেখে দিতে divপারেন।

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

ক্লানকি, তবে যতদূর আমি বলতে পারি কাজ করে। এটিতে অন্য কাজের দিকগুলির ত্রুটিগুলি নাও থাকতে পারে।

Comments

না, দয়া করে, কোনও টেবিল নেই। সিএসএস এটি পরিষ্কার উপায়ে করতে পারে। এক্ষেত্রে <টেবিল> ব্যবহার করার দরকার নেই।

— enguerranws

Answer 14

মাত্র 100% উচ্চতা সহ একটি টেবিলের ভিতরে সামগ্রীটি রেখে দিন এবং মূল ডিভের জন্য উচ্চতা সেট করুন

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Answer 15

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

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

CSS:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Answer 16

এটি একটি আধুনিক পদ্ধতির এবং এটি সিএসএস ফ্লেক্সবক্স কার্যকারিতা ব্যবহার করে। আপনি এখন উল্লম্বভাবে শুধু এই শৈলী যোগ করে আপনার বাবা-মা ধারক মধ্যে বিষয়বস্তু সারিবদ্ধ করতে .mainধারক

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

এবং আপনি যেতে ভাল!