সিএসএস কেন্দ্রের পাঠ্য (অনুভূমিক এবং উল্লম্বভাবে) একটি ডিভি ব্লকের ভিতরে

Question

আমার একটি divসেট আছে display:block( 90px heightএবং width), এবং আমার ভিতরে কিছু পাঠ্য আছে।

আমার পাঠ্যটি কেন্দ্রে উল্লম্ব এবং অনুভূমিকভাবে উভয়ভাবে প্রান্তিককরণের প্রয়োজন।

আমি চেষ্টা করেছি text-align:center, তবে এটি অনুভূমিক অংশটি করে না, তাই আমি চেষ্টা করেছি vertical-align:middle, তবে এটি কার্যকর হয়নি।

কোন ধারনা?

Comments

আপনার মানে text-align:center"উল্লম্ব অংশ" না?

— অবিচ্ছিন্নতা

অবশেষে আমি এমন একটি সমাধান খুঁজে পেয়েছি যা আপেক্ষিক আকার এবং কোনও স্থির উচ্চতাগুলির সাথে কাজ করে: stackoverflow.com/a/16195362/1301331

— সাইরাস

কেন্দ্র / মধ্যবর্তী উপাদানগুলি কীভাবে রাখবেন তা জানা খুব গুরুত্বপূর্ণ। নীচের নথিটি একটি খুব পরিষ্কার ছবি দিয়েছে। w3.org/Style/Eesample/007/center.en.html

— shibualexis

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

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

সম্ভাব্য সদৃশ একটি উপাদান অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রে কিভাবে?

— টাইলার

Answer 1

এটি যদি পাঠ্য এবং / অথবা চিত্রের এক লাইন হয় তবে এটি করা সহজ। শুধু ব্যবহার করুন:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

এটাই. যদি এটি একাধিক লাইন হতে পারে তবে এটি কিছুটা জটিল। তবে http://pmob.co.uk/ এ সমাধান রয়েছে । "উল্লম্ব সারিবদ্ধ" অনুসন্ধান করুন।

যেহেতু তারা হ্যাক হতে বা জটিল ডিভগুলি যুক্ত করে ... আমি সাধারনত একটি একক ঘরের সাথে একটি টেবিল ব্যবহার করি ... এটি যতটা সম্ভব সহজ করার জন্য।

---

2020 এর জন্য আপডেট:

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

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

সন্তানের জন্য একটি নির্দিষ্ট প্রস্থ নির্দিষ্ট করতে, যাকে "ফ্লেক্স আইটেম" বলা হয়:

#content {
  flex: 0 0 120px;
}

উদাহরণ: http://jsfiddle.net/2woqsef1/1/

সামগ্রী সঙ্কুচিত-মোড়ক করতে, এটি আরও সহজ: কেবলমাত্র flex: ...ফ্লেক্স আইটেমটি থেকে লাইনটি সরিয়ে ফেলুন এবং এটি স্বয়ংক্রিয়ভাবে সঙ্কুচিত-মোড়ানো হবে।

উদাহরণ: http://jsfiddle.net/2woqsef1/2/

উপরের উদাহরণগুলি এমএস এজ এবং ইন্টারনেট এক্সপ্লোরার 11 সহ প্রধান ব্রাউজারগুলিতে পরীক্ষা করা হয়েছে।

আপনার যদি এটি কাস্টমাইজ করার দরকার হয় তবে একটি প্রযুক্তিগত নোট: ফ্লেক্স আইটেমের ভিতরে, যেহেতু এই ফ্লেক্স আইটেমটি নিজেই কোনও ফ্লেক্স ধারক নয়, তাই সিএসএসের পুরানো নন-ফ্লেক্সবক্স উপায় প্রত্যাশার মতো কাজ করে। তবে আপনি যদি বর্তমান ফ্লেক্স ধারকটিতে একটি অতিরিক্ত ফ্লেক্স আইটেম যুক্ত করেন তবে দুটি ফ্লেক্স আইটেমটি অনুভূমিকভাবে স্থাপন করা হবে। এগুলি উল্লম্বভাবে স্থাপন করতে, এটিকে flex-direction: column;ফ্লেক্স পাত্রে যুক্ত করুন। এটি কোনও ফ্লেক্স ধারক এবং তার আশেপাশের শিশু উপাদানগুলির মধ্যে এটি কাজ করে।

কেন্দ্রীকরণ করার একটি বিকল্প পদ্ধতি রয়েছে: centerফ্লেক্স ধারকটির জন্য প্রধান এবং ক্রস অক্ষের বিতরণের জন্য নির্দিষ্ট না করে , পরিবর্তে margin: autoচারটি দিকের সমস্ত অতিরিক্ত স্থান গ্রহণ করার জন্য ফ্লেক্স আইটেমটি নির্দিষ্ট করুন এবং সমানভাবে বিতরণ করা মার্জিন ফ্লেক্স আইটেমটি সমস্ত দিকে কেন্দ্র করে তৈরি করবে। একাধিক ফ্লেক্স আইটেম থাকা ব্যতীত এটি কাজ করে। এছাড়াও, এই কৌশলটি এমএস এজে কাজ করে তবে ইন্টারনেট এক্সপ্লোরার 11 এ নয়।

---

২০১ / / 2017 এর জন্য আপডেট:

এটি আরও সাধারণভাবে করা যায় transformএবং এটি ইন্টারনেট এক্সপ্লোরার 10 এবং ইন্টারনেট এক্সপ্লোরার 11 এর মতো পুরানো ব্রাউজারগুলিতেও ভাল কাজ করে It এটি পাঠ্যের একাধিক লাইনের সমর্থন করতে পারে:

position: relative;
top: 50%;
transform: translateY(-50%);

উদাহরণ: https://jsfiddle.net/wb8u02kL/1/

প্রস্থ সঙ্কুচিত-মোড়ক করতে:

উপরের সমাধানটি সামগ্রীর ক্ষেত্রের জন্য একটি নির্দিষ্ট প্রস্থ ব্যবহার করেছে। সঙ্কুচিত-মোড়ানো প্রস্থ ব্যবহার করতে, ব্যবহার করুন

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

উদাহরণ: https://jsfiddle.net/wb8u02kL/2/

যদি ইন্টারনেট এক্সপ্লোরার 10 এর জন্য সমর্থন প্রয়োজন হয়, তবে ফ্লেক্সবক্স কাজ করবে না এবং উপরের পদ্ধতি এবং line-heightপদ্ধতিটি কাজ করবে। অন্যথায়, ফ্লেক্সবক্স কাজটি করত।

Comments

তার জন্য এখন একটি display: table-cellসম্পত্তি আছে , এফওয়াইআই। এটি ব্যবহার করে উপাদানটি একটি টেবিল ঘরের মতো আচরণ করে এবং অনুমতি দেয়vertical-align: middle;

— শওনা 14

আপনি যদি font:এগুলি ব্যবহার করে থাকেন তবে নিশ্চিত করুন যে আপনি এটিকে line-উচ্চতার চেয়ে এগিয়ে রেখেছেন `

— ব্যবহারকারী 1135469

এটি সম্ভবত উদ্দেশ্য হিসাবে কাজ করছে না যখন ডিভটিতে <br/> উপাদান রয়েছে।

— মার্টিন মিজার

আমার উচ্চতা যদি% তে হয়?

— ক্যান্ডেলকডার

এই পদ্ধতির সাথে টেক্সট পাঠ্যটি এক লাইনে থাকতে হবে, অন্যথায় আপনার প্রথম লিখিত 90px নীচে থাকবে।

— টমাসজ মুলারসিজিক

Answer 2

2014 হিসাবে সাধারণ কৌশল:

---

• পদ্ধতির 1 - transform translateX/ translateY:

  উদাহরণ এখানে / সম্পূর্ণ পর্দার উদাহরণ

  ইন সমর্থিত ব্রাউজারে (তাদের অধিকাংশই), আপনি ব্যবহার করতে পারেন top: 50%/ left: 50%সঙ্গে একযোগে translateX(-50%) translateY(-50%)পরিবর্তনশীল উল্লম্বভাবে থেকে / অনুভূমিকভাবে উপাদান কেন্দ্র।

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }

---

• পদ্ধতির 2 - ফ্লেক্সবক্স পদ্ধতি:

  উদাহরণ এখানে / সম্পূর্ণ পর্দার উদাহরণ

  ইন সমর্থিত ব্রাউজারে সেট displayলক্ষ্য উপাদান flexএবং ব্যবহার align-items: centerউল্লম্ব কেঁদ্রীকরণ এবং justify-content: centerঅনুভূমিক কেঁদ্রীকরণ জন্য। অতিরিক্ত ব্রাউজার সহায়তার জন্য কেবল বিক্রেতা উপসর্গ যুক্ত করতে ভুলবেন না ( উদাহরণ দেখুন )।

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }

---

• পদ্ধতি 3 - table-cell/ vertical-align: middle:

  উদাহরণ এখানে / সম্পূর্ণ পর্দার উদাহরণ

  কিছু ক্ষেত্রে, আপনাকে html/ bodyউপাদানটির উচ্চতা সেট করা আছে তা নিশ্চিত করতে হবে 100%।

  উল্লম্ব প্রান্তিককরণ জন্য, পিতা বা মাতা উপাদান এর সেট width/ heightথেকে 100%যোগ display: table। তারপর শিশু উপাদানের জন্য পরিবর্তন displayকরতে table-cellযোগ vertical-align: middle।

  অনুভূমিক কেন্দ্রের জন্য, আপনি হয় text-align: centerপাঠ্য এবং অন্য কোনও inlineশিশু উপাদানকে কেন্দ্র করে যুক্ত করতে পারেন । বিকল্পভাবে, আপনি margin: 0 autoউপাদানটি blockস্তর হিসাবে ধরে নিয়ে ব্যবহার করতে পারেন ।

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }

---

• পদ্ধতির 4 - 50%স্থানচ্যুতি সহ একেবারে উপর থেকে পুরোপুরি অবস্থিত :

  উদাহরণ এখানে / সম্পূর্ণ পর্দার উদাহরণ

  এই পদ্ধতির ধরে নেওয়া হয় যে পাঠ্যের একটি উচ্চতা রয়েছে - এই উদাহরণে 18px,। 50%প্যারেন্ট এলিমেন্টের তুলনায় শীর্ষ থেকে উপাদানটিকে একেবারে অবস্থান করুন । margin-topএই ক্ষেত্রে - উপাদানটির পরিচিত উচ্চতার অর্ধেক নেতিবাচক মান ব্যবহার করুন - -9px।

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }

---

• পদ্ধতির 5 - line-heightপদ্ধতি (কমপক্ষে নমনীয় - প্রস্তাবিত নয়):

  উদাহরণ এখানে

  কিছু ক্ষেত্রে, প্যারেন্ট উপাদানগুলির একটি নির্দিষ্ট উচ্চতা থাকবে। উল্লম্ব কেন্দ্রীকরণের জন্য, আপনাকে যা করতে হবে তা হ'ল line-heightপিতামাতার উপাদানগুলির নির্দিষ্ট উচ্চতার সমান সন্তানের উপাদানের উপর একটি মান নির্ধারণ করতে হবে ।

  যদিও এই সমাধান কিছু ক্ষেত্রে কাজ করবে, এটা এর মূল্য লক্ষ আছে যখন টেক্সট একাধিক লাইন আছে এটি কাজ করবে না - এই রকম ।

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }

---

4 এবং 5 পদ্ধতিগুলি সবচেয়ে নির্ভরযোগ্য নয়। প্রথম 3 টির মধ্যে একটির সাথে যান।

Comments

একটি বিস্তৃত উত্তরের জন্য +1। ব্যক্তিগতভাবে আমি প্রথম পদ্ধতিটি পছন্দ করি কারণ পদ্ধতি 2 এর কম সমর্থন রয়েছে এবং আমি table-cellযতটা সম্ভব এড়াতে চাই ।

— হ্যারি

২। ফ্লেক্সবক্স পদ্ধতিটি কেবলমাত্র একমাত্র কাজ করে যদি ont ১. পন্থা পরম। নিয়ন্ত্রণকারী এবং ৩. পদ্ধতিটি সহজভাবে কাজ করতে পারে নি, কারণ পিতামাতার পরম অবস্থান ছিল method

— জোনিস গ্রুজিস

ফ্লেক্স আইপ্যাড ক্রোম ব্রাউজারে উল্লম্ব কেন্দ্রীভূত মাল্টলাইন পাঠ্যের জন্য কাজ করেছিল।

— বব

ফ্লেক্সবক্স পদ্ধতি লটের সেরা।

— rorykoehler

যখন স্ক্রোলযোগ্য হয় তখন আমার কাছে অ্যাপ্রোচ 1 ব্যর্থ হয়।

— বিশাল গুলতি

Answer 3

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

<div class="box">
    <p>&#x0D05;</p>
</div>

সিএসএস:

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

দ্রুত পরামর্শ থেকে নেওয়া : মৌলিকভাবে অনুভূমিকভাবে এবং অনুভূমিকভাবে কেন্দ্রগুলির সহজতম উপায়

Comments

যত্নশীল: আইই তে কাজ করবে না। আপনাকে যুক্ত করতে হবে display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center।

— ফ্লোরিয়ান ওয়েনডেলবোন

যোগ text-align:centerজন্য inline-যেমন পাঠ্য হিসেবে উপাদান ..।

নোট করুন যে ফ্লেক্সবক্সের এখন আইই 10 এবং 11-তে কমপক্ষে আংশিক সমর্থন রয়েছে এবং ক্যানিউজ অনুযায়ী 97% ব্যবহারকারীর জন্য কাজ করে । ব্রাউজার সমর্থন আর এর বিরুদ্ধে যুক্তি বলে আমি মনে করি না।

— ফলিক্স গ্যাগন-গ্রেনিয়ার

Answer 4

লাইন যুক্ত করুন display: table-cell; জন্য আপনার সিএসএস সামগ্রীতে ।

কেবল টেবিল সেলগুলি সমর্থন করে vertical-align: middle; তবে আপনি [টেবিল-সেল] সংজ্ঞাটি ডিভকে দিতে পারেন ...

একটি সরাসরি উদাহরণ এখানে: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Comments

positionপরম বা স্থির থাকলে এটি কাজ করে না doesn't দেখুন: jsfiddle.net/tH2cc/1636

— অ্যারন ম্যাসন

Answer 5

আমি এর কনটেন্টটি অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্র করার জন্য নীচের সিএসএসটি সর্বদা ব্যবহার করি।

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

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

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

এটি এখানে কর্মে দেখুন: https://jsfiddle.net/yp1gusn7/

Comments

standards মানগুলি কেন গুরুত্বপূর্ণ

— ফ্লোরিয়িয়ান ওয়েন্ডেলবোন

Answer 6

আপনি এটির জন্য খুব সহজ কোড চেষ্টা করতে পারেন:

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

কোডপেন লিংক: http://codepen.io/santoshkhalse/pen/xRmZwr

Comments

এমনকি একাধিক লাইনে পাঠ্যের জন্যও কাজ করে, +1!

— জেরোইন বেলম্যানস

Answer 7

এই সিএসএস ক্লাসটি লক্ষ্যযুক্ত <ডিভ>>

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Comments

আপনার সত্যিই করতে হবে, এবং পাশাপাশি সিএসএস গ্রিড :) আমি এই পাঠ্যক্রমটি প্রস্তাব করছি ।

— আমিনু কানো

Answer 8

আপনি পিতামাতারflex সম্পত্তি ব্যবহার করতে পারেন এবং শিশুদের আইটেমগুলিতে সম্পত্তি যুক্ত করতে পারেন : divmargin:auto

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

আপনি flexএখানে আরও বিকল্প দেখতে পারেন : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 9

পদ্ধতির ঘ

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

পদ্ধতির ঘ

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

পদ্ধতির ঘ

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Answer 10

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

Answer 11

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Comments

অন্যান্য উত্তর পোস্টের তুলনায় এটি ঠিক কীভাবে আলাদা?

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

Answer 12

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Comments

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

— সুদীশ সিঙ্গানমাল্লা 20'18

Answer 13

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}

<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>

Answer 14

এটি আমার পক্ষে কাজ করে (পরীক্ষিত ঠিক আছে!):

এইচটিএমএল:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

সিএসএস:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

আপনি 50% এর চেয়ে অন্য মানগুলি চয়ন করতে পারেন। উদাহরণস্বরূপ, 25% পিতামাতাকে কেন্দ্র করে।

Answer 15

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Comments

দুটি উত্তর কেন?

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

Answer 16

আপনি নিম্নলিখিত পদ্ধতি ব্যবহার করতে পারেন:

1. আপনার যদি একটি শব্দ বা একটি লাইন বাক্য থাকে তবে নিম্নলিখিত কোডটি কৌশলটি করতে পারে।

   একটি ডিভ ট্যাগের ভিতরে একটি পাঠ্য রাখুন এবং এটি একটি আইডি দিন। এই আইডির জন্য নিম্নলিখিত বৈশিষ্ট্যগুলি সংজ্ঞায়িত করুন।

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   দ্রষ্টব্য: লাইন-উচ্চতার সম্পত্তিটি বিভাগের উচ্চতার সমান কিনা তা নিশ্চিত করুন।

   ভাবমূর্তি

   তবে, বিষয়বস্তু যদি একাধিক একক শব্দ বা একটি লাইন হয় তবে এটি কার্যকর হয় না। এছাড়াও, এমন সময় আসবে যখন আপনি px বা% তে বিভাগের আকার নির্দিষ্ট করতে পারবেন না (যখন বিভাগটি সত্যিই ছোট এবং আপনি চান যে বিষয়বস্তুটি ঠিক মাঝখানে হবে)।

2. এই সমস্যাটি সমাধান করার জন্য, আমরা নীচের বৈশিষ্ট্যের সংমিশ্রণটি চেষ্টা করতে পারি।

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   ভাবমূর্তি

   এই 3 টি লাইনের কোড সামগ্রীটিকে বিভাগের ঠিক মাঝখানে নির্ধারণ করে (প্রদর্শনের আকার নির্বিশেষে)। "সারিবদ্ধ-আইটেম: কেন্দ্র" যখন উল্লম্ব কেঁদ্রীকরণ সাহায্য করে "উভয়প্রান্তে সারিবদ্ধতা বিষয়বস্তু: কেন্দ্র" করতে হবে অনুভূমিকভাবে কেন্দ্রীভূত।

   দ্রষ্টব্য: সব ব্রাউজারে ফ্লেক্স কাজ করে না। অতিরিক্ত ব্রাউজার সহায়তার জন্য আপনি উপযুক্ত বিক্রেতার উপসর্গ যুক্ত করেছেন তা নিশ্চিত করুন।

Comments

বিকল্প 2 আমার জন্য ভাল কাজ করেছে। ধন্যবাদ!

— anacron

Answer 17

গ্রিড

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Answer 18

উল্লম্ব সারিবদ্ধতা পেতে লাইন উচ্চতা সামঞ্জস্য করা।

line-height: 90px;

Comments

না downvote কারণ এটি যাচ্ছে পারেন একটি সমাধান হতে পারে, তবে এই শুধুমাত্র কাজ করে আপনি একক লাইন টেক্সট গ্যারান্টি পারেন ...

— dooleyo

Answer 19

এটি সঠিক উত্তর হওয়া উচিত। সবচেয়ে সহজ এবং সহজ:

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

Answer 20

শৈলী প্রয়োগ করুন:

position: absolute;
top: 50%;
left: 0;
right: 0;

আপনার পাঠ্য দৈর্ঘ্য নির্বিশেষে কেন্দ্রীভূত হবে।

Answer 21

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

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Answer 22

আমার জন্য এটি সর্বোত্তম সমাধান ছিল:

এইচটিএমএল:

 <div id="outer">  
     <img src="logo.png">
 </div>

সিএসএস:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Answer 23

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Comments

এটি ভাল পরিষ্কার কোড। যদিও, আপনি আপনার ডিভি ট্যাগগুলিতে আইডি যুক্ত করতে পারেন, যাতে প্রয়োজনে পরে এগুলি ব্যবহার করতে পারেন।

— আমির মোঃ আমিরুজ্জামান

আপনার পরামর্শের জন্য ধন্যবাদ। হ্যাঁ, আমি সম্মত আইডি হস্তক্ষেপ করতে সহায়ক।

আপনি কি পূর্ববর্তী উত্তরগুলি পড়েছিলেন? এই উত্তরটি পূর্বেরগুলিতে কী যুক্ত করে বলতে পারেন?

— তেমনি আফিফ

@ আমির এমডি আমিরুজ্জামান আপনি কি আমাদের এই কোডটির সবচেয়ে পরিষ্কার অংশটি বলতে পারেন :) ... আমি ইনলাইন শৈলীগুলি দেখতে পাই যা ভাল নয় ... এছাড়াও আইডি যুক্ত করাও খুব ভাল ধারণা নয়, আমাদের ক্লাসগুলি দরকার

— তেমনি আফিফ

জোশের উত্তরের 1 পদ্ধতির সদৃশ

— মুনিম মুন্না

Answer 24

সত্যিই সহজ কোড যা আমার পক্ষে কাজ করে! কেবলমাত্র একটি লাইন এবং আপনার পাঠ্যটি অনুভূমিকভাবে কেন্দ্রিক হবে।

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

আউটপুটটি দেখতে এটির মতো দেখাচ্ছে:

দয়া করে এই উত্তরটি ভোট দিন যদি এটি সহজে সমাধানগুলির সন্ধানের জন্য ডেভসের কিছু সময় বাঁচানোর জন্য কাজ করে। ধন্যবাদ! :)

Answer 25

নিম্নলিখিত উদাহরণ চেষ্টা করুন। আমি প্রতিটি বিভাগের জন্য উদাহরণ যুক্ত করেছি: অনুভূমিক এবং উল্লম্ব

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html> 

Comments

প্রশ্নটি অনুভূমিকভাবে কেন্দ্রীভূত করার বিষয়ে এবং উলম্বভাবেও এই সমাধানটি ইতিমধ্যে সরবরাহ করা হয়েছে

— তেমনী আফিফ