আমি কীভাবে উল্লম্বভাবে একটি ডিভে পাঠ্য প্রান্তিককরণ করব?

Question

আমি একটি ডিভের সাহায্যে পাঠ্য সারিবদ্ধ করার সবচেয়ে কার্যকর উপায় সন্ধান করার চেষ্টা করছি। আমি কয়েকটি জিনিস চেষ্টা করে দেখেছি এবং কেউই কাজ করছে বলে মনে হয় না।

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Comments

এই ইউআরএলে একটি উদাহরণ রয়েছে: http://css-tricks.com/vertically-center-m Multi-lines-text/ ।

— সিগুজেল

stackoverflow.com/questions/5703552/…

— জোশ ক্রোজিয়ার

stackoverflow.com/questions/8865458/…

— ওহাদ স্নাইডার

css-tricks.com/centering-css-complete-guide

— user1063287

Answer 1

সিএসএসে উল্লম্ব কেন্দ্রীকরণ
http://www.jakpsatweb.cz/css/css-versical-center-solve.html

নিবন্ধের সংক্ষিপ্তসার:

একটি সিএসএস 2 ব্রাউজারের জন্য, কেউ কেন্দ্রের সামগ্রী display:table/ ব্যবহার করতে পারে display:table-cell।

জেএসফিডেলে একটি নমুনাও পাওয়া যায় :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

পুরানো ব্রাউজারগুলির জন্য হ্যাকগুলি (ইন্টারনেট এক্সপ্লোরার 6/7) #নতুন ব্রাউজারগুলি থেকে শৈলীগুলি আড়াল করে স্টাইলগুলিতে মার্জ করা সম্ভব :

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Comments

প্রথম লিঙ্কটি আরও ভাল বলে আমি মনে করি যদিও এটি জটিল কারণ হিসাবে দেখায় দ্বিতীয় লিঙ্কটি কেবলমাত্র একটি সারি পাঠ্য বা এমন একটি চিত্র ব্যবহার করে যা আপনি উচ্চতা জানেন। যদি আপনার 2 বা 3 টি সারি পাঠ্য থাকে বা আপনি যদি আপনার পাঠ্যের উচ্চতা না জানেন তবে তা পরিবর্তিত হয়। কিভাবে লাইন উচ্চতা সঙ্গে কাজ করবে? সংক্ষেপে। আমি প্রথম সংস্করণ পরীক্ষা করেছি এবং এটি IE, ফায়ারফক্স এবং ক্রোমে কাজ করে।

— রাউল

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

— আলেকজান্ডার.ইলজুশকিন 21

@ ফ্লেক্সট্রা: এ কারণেই লোকেরা এখনও গ্রিড বিন্যাসের জন্য টেবিল ব্যবহার করে। উল্লম্ব সারিবদ্ধ (বা উচ্চতা এবং গতিশীল ডেটা সহ যে কোনও কিছু) খাঁটি সিএসএসের সাথে চ্যালেঞ্জিং হতে পারে। আপনাকে এরকম অদ্ভুত হ্যাক করতে ইচ্ছুক হতে হবে (কিছুটা "লেআউট থেকে আলাদা করা সামগ্রী" ধারণাটিকে পরাভূত করে), বা মাল্টি-পাস রেন্ডারিং হিট নিতে হবে এবং অ স্থিতিযুক্ত টেবিলগুলি ব্যবহার করতে হবে। আমি শেষ ব্যবহারকারীদের কাছ থেকে একবারও অভিযোগ পাইনি tableযে সত্ত্বেও আমি নিয়মিত CSS ফ্যানবয়ের হৃদয় ভঙ্গ করি। বেশিরভাগ এঁদের ডিজাইন কেবলমাত্র সাধারণ ব্লগ এবং স্থিতিশীল সাইটগুলি। আমাদের মধ্যে কিছু ব্যবসায়ের সফ্টওয়্যার তৈরি করে এবং ঘন ডেটা প্রদর্শন প্রয়োজন এবং আমাদের ব্যবহারকারীরা কার্যকারিতা সম্পর্কে আরও যত্নশীল হন।

— অযৌক্তিক

হাঁ। আমাকে ভুল করবেন না, যদি আমি একটি "সাইট" তৈরি করি তবে আমি চটজলদি এইচটিএমএল নিয়ে যাই এবং খাঁটি সিএসএস পছন্দ করি তবে আমি কতক্ষণ ঘণ্টার জন্য আস্তরণের জিনিসপত্র নিয়ে কুস্তি করেছিলাম, যখন আমি কেবল 'এফ এটি' বলেছিলাম এবং একটি ব্যবহার করেছি table। বিষয়গুলি এখন আরও ভাল, তবে আমাদের মধ্যে যারা বিজনেস ওয়েব অ্যাপ্লিকেশন করেন তাদের পুরানো ব্রাউজারগুলিকে সমর্থন করতে হবে (আইআই 6 এখনও কিছু ক্লায়েন্টের ব্যবহারে রয়েছে!), অন্যদিকে যারা ব্লগ তৈরি করেন তারা মেঘের মধ্যে থাকতে পারেন এবং ভান করে যে বিশ্বের প্রত্যেকের কাছে রয়েছে দ্রুত সংযোগ, নতুন কম্পিউটার এবং সিএসএস 3 সহ এক্স ব্রাউজারের সর্বশেষ সংস্করণ ইত্যাদি etc. পয়েন্টের ক্ষেত্রে কেস: কিছু জিরা প্লাগইনগুলি লেআউটের জন্য একক-সারি সারণী ব্যবহার করে (বা যাই হোক না কেন)

— অযথা

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

— Desty

Answer 2

আপনাকে line-heightঅ্যাট্রিবিউট যুক্ত করতে হবে এবং সেই বৈশিষ্ট্যটি অবশ্যই এর উচ্চতার সাথে মেলে div। আপনার ক্ষেত্রে:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

আসলে, আপনি সম্ভবত heightপুরোপুরি বৈশিষ্ট্যটি মুছে ফেলতে পারেন ।

এটি কেবলমাত্র এক লাইনের পাঠ্যের জন্যই কাজ করে , তাই সাবধান হন।

Comments

আমি বিশ্বাস করি এটি কেবলমাত্র বৈধ যদি আপনার ডিভিতে পাঠ্যের একক লাইন থাকে।

— WEFX

অবশ্যই, যদি আপনার পাঠ্যে এটি 1 টিরও বেশি লাইনে ছুটে যায় তবে আপনার উন্মাদরেখার ফাঁক থাকবে।

— ডেভিড

@ BobChatting, হ্যাঁ এটি করে। এমন সমাধানের জন্য আমার উত্তরটি দেখুন যা একাধিক লাইনের পাঠ্যকে অনুমতি দেয়।

— অ্যাডাম তোমাট

লাইন-উচ্চতা প্রতিটি বাচ্চার কাছে প্রচার করে

— কেভিএম

শতাংশ নিয়ে কাজ করছে না: উচ্চতা: 100%; লাইন-উচ্চতা: 100%

— আলবেনেক্স

Answer 3

এখানে একটি দুর্দান্ত সম্পদ

Http://howtocenterincss.com/ থেকে :

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

ফ্লেক্সবক্স ব্যবহার করা

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

এখানে কিছু দুর্দান্ত সংস্থান রয়েছে:

• ফ্লেক্সবক্সের একটি গাইড
• ফ্লেক্সবক্সের সাহায্যে উপাদানগুলি কেন্দ্র করে
• ফ্লেক্সবক্সের জন্য ইন্টারনেট এক্সপ্লোরার 10 সিনট্যাক্স
• ফ্লেক্সবক্সের জন্য সমর্থন

ব্রাউজারের উপসর্গ সহ জেএসফিডাল

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

আর একটি সমাধান

এটি জিরোসিক্সথ্রি থেকে এবং আপনাকে ছয় লাইন সিএসএসের সাহায্যে কিছু কেন্দ্র করতে দেয়

এই পদ্ধতিটি ইন্টারনেট এক্সপ্লোরার 8 এবং এর চেয়ে কম ক্ষেত্রে সমর্থিত নয় ।

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

পূর্ববর্তী উত্তর

চিহ্নিত উত্তরটিতে লিঙ্ক হিসাবে কার্যকর একটি সহজ এবং ক্রস ব্রাউজার পদ্ধতির সামান্য পুরানো।

জাভাস্ক্রিপ্ট বা সিএসএস লাইন হাইটের অবলম্বন ছাড়াই আনর্ডারড তালিকার এবং ডিভ উভয় ক্ষেত্রে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত পাঠ্য । আপনার কতটা পাঠ্য রয়েছে তা নির্দিষ্ট সুনির্দিষ্ট তালিকা বা ডিভিডগুলিতে আপনাকে কোনও বিশেষ ক্লাস প্রয়োগ করতে হবে না (প্রতিটিটির জন্য কোডটি একই)। এটি ইন্টারনেট এক্সপ্লোরার 9, ইন্টারনেট এক্সপ্লোরার 8, ইন্টারনেট এক্সপ্লোরার 7, ইন্টারনেট এক্সপ্লোরার 6, ফায়ারফক্স, ক্রোম, অপেরা এবং সাফারি সহ সমস্ত বড় ব্রাউজারগুলিতে কাজ করে । আধুনিক ব্রাউজারগুলির নেই এমন CSS এর সীমাবদ্ধতার কারণে তাদের সহায়তা করার জন্য দুটি বিশেষ স্টাইলশিট রয়েছে (একটি ইন্টারনেট এক্সপ্লোরার 7 এবং অন্যটি ইন্টারনেট এক্সপ্লোরার 6 এর জন্য)।

অ্যান্ডি হাওয়ার্ড - একটি আনর্ডারড তালিকা বা ডিভের মধ্যে কীভাবে উলম্ব এবং অনুভূমিকভাবে পাঠ্যকে কেন্দ্র করে to

আমি যে শেষ প্রকল্পটিতে কাজ করেছি তার জন্য ইন্টারনেট এক্সপ্লোরার 7/6 এর জন্য আমি খুব একটা পাত্তা না দিয়ে আমি কিছুটা স্ট্রিপ ডাউন সংস্করণ ব্যবহার করেছি (যেমন ইন্টারনেট এক্সপ্লোরার 7 এবং 6 এ কাজটি করা জিনিসগুলি মুছে ফেলে)। এটি অন্য কারও জন্য কার্যকর হতে পারে ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Comments

সমস্যা নেই. আমি এখনও ব্যবহার করতে পছন্দ করি height: x; line-height: x;তবে প্রায়শই আমার পাঠ্যের একাধিক লাইনের প্রয়োজন হয় না। এই কারণেই আমি এই সমাধানটি পছন্দ করি। সরল, পুনঃব্যবহারযোগ্য, ক্রস ব্রাউজার, জেএস নেই এবং কেবল কিছুটা অতিরিক্ত মার্ক আপ প্রয়োজন।

— অ্যাডাম তোমাট

পাঠ্যটি যদি বাক্সের চেয়ে বড় হয় তবে এটি উপচে পড়বে। উপচে পড়া প্রতিরোধের জন্য আমি বিভিন্ন উপায়ে চেষ্টা করেছি তবে এগুলি টেবিল এবং টেবিল-সেল প্রদর্শনের সাথে আপাতদৃষ্টিতে দ্বন্দ্বপূর্ণ। আমি ওভারফ্লোটি সীমাবদ্ধ করার সাথে সাথে উল্লম্ব কেন্দ্রিক কাজ বন্ধ করে দেয়। jsfiddle.net/2HHLE কোন ধারণা?

— থমাস ডেভিড বেকার

আমার নিজের প্রশ্নের উত্তরের জন্য যদি আপনি টেবিল / টেবিল-সেল ডিভ (গুলি) নির্দিষ্ট চওড়া / উচ্চতা এবং ওভারফ্লো দিয়ে অন্য ডিভের মধ্যে রাখেন: লুকানো যা কৌশলটি করবে। আমি এটি ব্লুবোন.নেস.২০১৩

— টমাস ডেভিড বেকার

@ থমাস ডেভিডবেকার, অন্য সমাধানগুলি আপনার যদি গতিশীল হওয়ার প্রয়োজন হয় তবে এটি একটি 100% উচ্চতা নির্ধারণ করে। এখানে একটি jsfiddle এর , মূলত এইমাত্র পরিবর্তন height: 100px;করতে height: 100%;জন্য উভয় liএবং জন্য .outerContainer।

— আদম তোমাট

এখানে নাক পিকার হতে চাই না তবে জিরোসিক্সথ্রি থেকে দ্বিতীয় সমাধানে। "- ওয়েকবিট- ট্রান্সফর্ম: ট্রান্সলেট ওয়াই (-50%)" তে সিএসএসে একটি টাইপো রয়েছে ; তবুও, অনেক ধন্যবাদ !! দুর্দান্ত সমাধান!

— গাগনি

Answer 4

এটা দিয়ে সহজ display: flex। নিম্নলিখিত পদ্ধতি সহ, পাঠ্যটি divউল্লম্বভাবে কেন্দ্রীভূত হবে:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

এবং যদি আপনি চান, অনুভূমিক:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

আপনার অবশ্যই ব্রাউজার সংস্করণটি দেখতে হবে; পুরানো সংস্করণে কোড কাজ করে না।

Comments

সংক্ষিপ্ত এবং মিষ্টি ... এত সহজ কিছু করার উপায়টি। আইই 11, ক্রোম এবং ফায়ারফক্সে কাজ করে ... আমার পক্ষে যথেষ্ট ভাল

— স্প্ল্যাশআউট

এই উত্তরটি svg এ বিদেশী অবজেক্টের ভিতরে পাঠ্য অবস্থানের সাথে কাজ করে। ধন্যবাদ!

আমি বিশ্বাস করি: ফ্লেক্স হ'ল সব কিছুর প্রতিকার!

— ডেনিসকলোডিন

text-align: centerএছাড়াও প্রয়োজনীয়, কারণ দীর্ঘ পাঠ্য প্রস্থের প্রস্থ এবং বামদিকে সারিবদ্ধ করা হবে

— ডেনিসকলোডিন

আমার এটির সাথে সর্বদা সমস্যা ছিল এবং আমি লাইন উচ্চতা বৃদ্ধির উত্তরটিকে একেবারে ঘৃণা করি। এটি সত্যিই ভাল কাজ করেছে।

— জেড লিঞ্চ

Answer 5

আমি সহজেই এলোমেলো উপাদানগুলি আনুভূমিকভাবে কেন্দ্র করতে নিম্নরূপ ব্যবহার করি:

এইচটিএমএল:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

সিএসএস:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

এটি আমার পাঠ্যটিকে div200 পিক্স-উচ্চ বাইরের ঠিক উল্লম্ব মাঝখানে রাখে div। নোট করুন যে -webkit-আপনার ব্রাউজারের জন্য এই কাজটি করতে আপনার ব্রাউজারের উপসর্গ (যেমন আমার ক্ষেত্রে) ব্যবহার করতে হতে পারে।

এটি কেবল পাঠ্যের জন্যই নয়, অন্যান্য উপাদানগুলির জন্যও কাজ করে।

Comments

আমি এর সাথে আরও নির্ভরযোগ্য ফলাফল পেয়েছি position: absolute;- ধন্যবাদ! এনবি আপনি অন্তর্ভুক্ত করতে চাইতে পারেন -ms-transformবা আইই কিছু অন্য জিনিস আপ করবে

— উইলফ

প্লাঙ্কার -web-kit-transformআগে রাখার পরামর্শ দেয় transform। সম্ভবত যোগ করা -ms-transform@ টনিমিশেলকৌবেটের সমস্যা সমাধান করতে পারে।

— সাকোভিয়াস

Answer 6

আপনি প্রদর্শনটি 'টেবিল-সেল' এ সেট করে এবং একটি প্রয়োগ করে এটি করতে পারেন vertical-align: middle;:

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

আমি অনুমতি ছাড়াই http://www.w3schools.com/cssref/pr_class_display.asp থেকে অনুলিপি করা এই অংশ অনুসারে এটি ইন্টারনেট এক্সপ্লোরারের সমস্ত সংস্করণ দ্বারা সমর্থিত নয় ।

দ্রষ্টব্য: মানগুলি "ইনলাইন-টেবিল", "সারণী", "টেবিল-ক্যাপশন", "টেবিল-ঘর", "সারণী-কলাম", "সারণী-কলাম-গোষ্ঠী", "সারণী-সারি", "সারণী-সারি" -গ্রুপ ", এবং" উত্তরাধিকারী "ইন্টারনেট এক্সপ্লোরার 7 এবং এর আগে সমর্থন করে না। ইন্টারনেট এক্সপ্লোরার 8 এর জন্য একটি! ইন্টারনেট এক্সপ্লোরার 9 মানগুলিকে সমর্থন করে।

নিম্নলিখিত টেবিলটি http://www.w3schools.com/cssref/pr_class_display.asp থেকেও অনুমোদিত প্রদর্শনের মানগুলি দেখায় ।

Comments

ভালো বুদ্ধি! প্রদর্শন: টেবিল-কক্ষের অন্যান্য প্রভাব রয়েছে তবে আপনি যদি তাদের সাথে ঠিক থাকেন তবে এটি একটি দুর্দান্ত সমাধান

— ব্রায়ান লো

উপাদানটির উচ্চতা যুক্ত করাও গুরুত্বপূর্ণ।

— এলান পেরাক

দুর্ভাগ্যক্রমে ওভারফ্লো: লুকানো প্রদর্শনে কাজ করে না: টেবিল-সেল

— TheJeff

Answer 7

এই দিনগুলিতে (আমাদের আর 6-7-8 ইন্টারনেট এক্সপ্লোরার প্রয়োজন নেই) আমি কেবল display: tableএই ইস্যুতে (বা display: flex) সিএসএস ব্যবহার করব ।

---

পুরানো ব্রাউজারগুলির জন্য:

টেবিল:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

ফ্লেক্স:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

---

এটি হ'ল (আসলে, এটি ছিল) এই সমস্যার জন্য আমার প্রিয় সমাধান (সহজ এবং খুব ভাল ব্রাউজার সমর্থিত):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Comments

@ ইম্রয়ে তিনি মূলত পাঠ্যের (ছদ্ম: পূর্বে) পাশে 0 পিক্স প্রস্থের ইনলাইন-ব্লক উপাদান যুক্ত করছেন। যাইহোক, এই মিথ্যা ব্লকের একটি 100% উচ্চতা রয়েছে, এটি কৌশল। যেহেতু ব্লক এবং পাঠ্য উভয় ভি-সারিবদ্ধ, এটি উদ্দেশ্য হিসাবে রেন্ডার করে।

— ড্যান এইচ

সেরা উত্তর, পরিষ্কার সমাধান, IE8 সমর্থিত

— রোকো

যখন পাঠ্যটি মোড়ানো হয়, আপনার এটির সাথে সমস্যা থাকতে পারে। নীচে নেস্টেড উপাদানটিতে এটি যুক্ত করে আমি এটি ঠিক করেছি: প্রস্থ: 95%; উল্লম্ব-সারিবদ্ধ: মাঝখানে;

— ট্রাগ্রগ্লিয়া

পাঠ্যটি যদি দীর্ঘ হয় তবে এটি কার্যকর হয় না। আপনার কি সমাধান আছে? jsfiddle.net/cyxuy95q

— বিটা

আপনার পূর্ববর্তী মন্তব্যে যেমন পরামর্শ দেওয়া হয়েছে, সর্বাধিক প্রস্থ 95% jsfiddle.net/cyxuy95q/1

— টনি মিশেল কাবেট

Answer 8

এটি ব্যবহার করে, পিতামাতার ডিভ যোগ করুন:

display: flex;
align-items: center;

Comments

আমি এটি পছন্দ করি - সহজ এবং আধুনিক ব্রাউজারগুলিতে কাজ করে

— ক্যাস্পার স্কোভগার্ড

Answer 9

এখানে এমন একটি সমাধান রয়েছে যা পাঠের একক লাইনের জন্য সর্বোত্তম কাজ করে।

লাইন সংখ্যা জানা থাকলে এটি কিছু টুইট করে বহু-রেখাযুক্ত পাঠ্যের জন্যও কাজ করতে পারে।

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

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

Answer 10

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Comments

উল্লম্ব-সারিবদ্ধ করার সময় কবজির মতো কাজ করেছেন: মাঝারি; এবং বাকি সব ব্যর্থ।

— চিওয়দা

Answer 11

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

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

আপনি এ সম্পর্কে আরও শিখতে পারেন ফ্লেক্সবক্সের সম্পূর্ণ নির্দেশিকায় ।

Answer 12

এই সহজ সমাধান পরীক্ষা করুন:

এইচটিএমএল

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

সিএসএস

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Answer 13

টেবিল / টেবিল-কক্ষটি অবলম্বন না করে লম্বালম্বিভাবে সামগ্রীটি সারিবদ্ধ করার একটি সহজ উপায় রয়েছে:

http://jsfiddle.net/bBW5w/1/

এটিতে আমি একটি অদৃশ্য (প্রস্থ = 0) ডিভি যুক্ত করেছি যা ধারকটির পুরো উচ্চতা ধরে নেয়।

এটি ইন্টারনেট এক্সপ্লোরার এবং ফায়ারফক্স (সর্বশেষ সংস্করণ) এ কাজ করছে বলে মনে হচ্ছে। আমি অন্যান্য ব্রাউজারগুলির সাথে চেক করিনি

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

এবং অবশ্যই সিএসএস:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Answer 14

এটি আমার কাছে পাওয়া সবচেয়ে পরিষ্কার সমাধান (ইন্টারনেট এক্সপ্লোরার 9+) এবং transform-styleঅন্যান্য উত্তর বাদ দেওয়া হয়েছে এমনটি ব্যবহার করে "বাই বাই 5। পিক্সেল" ইস্যুটির জন্য একটি সংশোধন যোগ করেছে ।

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

উত্স: উল্লম্ব সিএসএসের মাত্র 3 লাইন দিয়ে যেকোন কিছু সারিবদ্ধ করুন

Answer 15

মানগুলি না জানার একটি উপাদানটির একটি সহজ সমাধান:

এইচটিএমএল

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

সিএসএস

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Answer 16

আদম Tomat ডাউনলোড এর উত্তর মতে সেখানে প্রস্তুত করা হয়েছে JSFiddle উদাহরণ টেক্সট সারিবদ্ধ DIV আছে :

<div class="cells-block">    
    text<br/>in the block   
</div>

ডিসপ্লে ব্যবহার করে : সিএসএসে ফ্লেক্স :

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

অন্য একটি উদাহরণ এবং একটি ব্লগ পোস্টে কয়েকটি ব্যাখ্যা সহ ।

Answer 17

গ্রিড-আইটেমে মার্জিন অটো।

একইভাবে ফ্লেক্সবক্সে, গ্রিড-আইটেমে মার্জিন অটো প্রয়োগ করা উভয় অক্ষকে কেন্দ্র করে:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Answer 18

ফ্লেক্সবক্স আমার জন্য পুরোপুরি কাজ করেছিল, প্যারেন্ট ডিভের একাধিক উপাদানকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্র করে।

এইচটিএমএল-কোড:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

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

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Answer 19

ব্যবহার করুন:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

এই কৌশলটির সাহায্যে, আপনি বামদিকে সারিবদ্ধ করতে "বাম: 0" যুক্ত করে এটিকে কেন্দ্র করতে না চাইলে আপনি যেকোন কিছু প্রান্তিককরণ করতে পারেন।

Answer 20

এইচটিএমএল

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

সিএসএস

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Answer 21

ফ্লেক্স ব্যবহার করে, ব্রাউজারগুলির রেন্ডারিংয়ে পার্থক্যগুলি সম্পর্কে সতর্ক থাকুন।

এটি ক্রোম এবং ইন্টারনেট এক্সপ্লোরার উভয়ের জন্যই ভাল কাজ করে:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

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

এটি কেবল ক্রোমের সাথে কাজ করে এমনটির সাথে তুলনা করুন:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Answer 22

এটি CSS এ ব্যবহার করে divএকটি divপ্যাটার্নে এর আরও একটি প্রকরণ calc()।

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

এটি কাজ করে, কারণ:

• position:absoluteএর divমধ্যে যথাযথ স্থান নির্ধারণের জন্যdiv
• আমরা অভ্যন্তরের উচ্চতা জানিdiv কারণ এটি সেট করেছি 20px।
• calc(50% - 10px)জন্য 50% - অর্ধেক উচ্চতা ভেতরের কেঁদ্রীকরণ জন্যdiv

Comments

পিতামাতার

— দ্বিদের

Answer 23

এটি সূক্ষ্মভাবে কাজ করে:

এইচটিএমএল

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

ইমেজ ট্যাগ ছাড়াই এবং সাথে <mat-icon>(যা একটি ফন্ট)।

Answer 24

হুম, এটি সমাধান করার জন্য অবশ্যই অনেকগুলি উপায় রয়েছে।

তবে আমার কাছে এমন একটি রয়েছে <div>যা পুরোপুরি অবস্থিত, height:100%(প্রকৃতপক্ষে top:0;bottom:0এবং নির্দিষ্ট প্রস্থ) এবং display:table-cellকেবল পাঠ্যটি উল্লম্বভাবে কেন্দ্র করে কাজ করে নি। আমার সমাধানটির জন্য একটি অভ্যন্তরীণ স্প্যান উপাদান প্রয়োজন ছিল, তবে আমি দেখতে পাচ্ছি অন্যান্য সমাধানগুলিও অনেকগুলি করে, তাই আমি এটি যুক্ত করতে পারি:

আমার ধারকটি একটি .labelএবং আমি সংখ্যাটি উল্লম্বভাবে কেন্দ্রিকভাবে এটিতে চাই। আমি একেবারে অবস্থান top:50%এবং সেট করে এটি করেছিline-height:0

<div class="label"><span>1.</span></div>

এবং সিএসএস নিম্নরূপ:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

এটি কর্মে দেখুন: http://jsfiddle.net/jcward/7gMLx/

Comments

খুব সহজ কারণ এটি সহজ সমাধান। ডাউনসাইড হ'ল এটি কেবল একক লাইন পাঠ্যের জন্য কাজ করে, দীর্ঘ পাঠ্য সহ উদাহরণের কাঁটাচামচ দেখুন। jsfiddle.net/6sWfw

— টমাস টিন্তেরা

Answer 25

আপনি সিএসএস ব্যবহার করতে পারেন flexbox।

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 26

সিএসএস গ্রিড ব্যবহার করে এটি আমার জন্য হয়েছিল:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Answer 27

একটি টেবিল উপাদান এম্বেড করার চেষ্টা করুন।

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Comments

টেবিলগুলি কেবল সারণী ডেটা নিয়ে কাজ করার জন্য। বিন্যাস সমস্যা সমাধানের জন্য এগুলি কখনও ব্যবহার করা উচিত নয়।

— মাইক্রোস

টেবিলগুলি সম্পর্কে দুর্দান্ত জিনিসটি তবে এগুলি সর্বদা সুসংগত - CSS এর দ্বারা অনেকগুলি বিভিন্ন উপায়ে ব্যাখ্যা করা হয় এবং কিছু সহজ করার জন্য নেস্টেড ডিআইভি লাগানো অতিরিক্ত HTML (এবং বিভ্রান্তি) যুক্ত করে। সিএসএস এখনও গুরুতর ত্রুটিযুক্ত

— এমসি 9000

হ্যাঁ, দুর্ভাগ্যবশত, এই এখনও একটি ব্লক মধ্যে উল্লম্বভাবে সারিবদ্ধ (অজানা) পাঠ্যে শুধুমাত্র নির্ভরযোগ্য উপায়। সিএসএস দেবতারা এত ভালকে ঘৃণা করেন কেন? (সমস্ত ব্রাউজার এটি ধারাবাহিকভাবে করতে পারে - তবে কেবল টেবিল কোষগুলিতে)

— T4NK3R

Answer 28

ডিভের কেন্দ্রে সামগ্রী বা একটি চিত্র প্রদর্শন করার জন্য বেশ কয়েকটি কৌশল রয়েছে । উত্তরগুলির কয়েকটি সত্যই সুন্দর এবং এগুলির সাথে আমিও পুরোপুরি একমত।

সিএসএসে সম্পূর্ণ অনুভূমিক এবং উল্লম্ব কেন্দ্রিক

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

উদাহরণ সহ 10 টিরও বেশি কৌশল রয়েছে । এখন আপনি নিজেরাই পছন্দ করেন to

সন্দেহ নেই, display:table; display:table-Cellএকটি ভাল কৌশল।

কিছু ভাল কৌশল নিম্নলিখিত:

ট্রিক 1 - ব্যবহার করে display:table; display:table-cell

এইচটিএমএল

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

সিএসএস কোড

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

কৌশল 2 - ব্যবহার করে display:inline-block

এইচটিএমএল

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

সিএসএস কোড

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

কৌশল 3 - ব্যবহার করে position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

Answer 29

সিএসএস:

.vertical {
   display: table-caption;
}

আপনি উল্লম্বভাবে সারিবদ্ধ করতে চান এমন উপাদানগুলিতে এই শ্রেণিটি যুক্ত করুন

Answer 30

আপনার যদি min-heightসম্পত্তিটি ব্যবহার করতে হয় তবে আপনাকে অবশ্যই এই সিএসএস যুক্ত করতে হবে:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}