html - কিভাবে একটি অনুভূমিকভাবে একটি<div> কেন্দ্র?




css alignment (20)

টেক্সট-সারিবদ্ধ: কেন্দ্র

text-align: center প্রয়োগ করা হচ্ছে text-align: center ইনলাইন সামগ্রী text-align: center লাইন বাক্সের মধ্যে কেন্দ্রীভূত। যেহেতু ভিতরের div ডিফল্ট width: 100% দ্বারা আছে width: 100% আপনি একটি নির্দিষ্ট প্রস্থ নির্ধারণ করতে বা নিম্নলিখিত একটি ব্যবহার করতে হবে:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

মার্জিন: 0 অটো

margin: 0 auto ব্যবহার করে margin: 0 auto আরেকটি বিকল্প এবং এটি পুরোনো ব্রাউজারের সামঞ্জস্যের জন্য আরও উপযুক্ত। এটা display: table সাথে একসঙ্গে কাজ করে display: table

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

flexbox

display: flex একটি ব্লক উপাদান মত আচরণ করে এবং flexto মডেল অনুযায়ী তার কন্টেন্ট রাখে। এটা justify-content: center সঙ্গে কাজ করে justify-content: center

দয়া করে মনে রাখবেন: ফ্লেক্সবক্স সর্বাধিক ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ কিন্তু সব নয়। ব্রাউজার সামঞ্জস্য একটি সম্পূর্ণ এবং আপ টু ডেট তালিকা জন্য here দেখুন।

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

রুপান্তর

transform: translate আপনাকে CSS ভিজ্যুয়াল বিন্যাসকরণ মডেলের সমন্বয় স্থান পরিবর্তন করতে দেয়। এটি ব্যবহার করে, উপাদান অনুবাদ করা যেতে পারে, ঘূর্ণিত, স্কেল, এবং skewed। অনুভূমিকভাবে কেন্দ্র করতে এটি position: absolute প্রয়োজন position: absolute এবং left: 50%

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (প্রত্যাখ্যাত)

ট্যাগ <center> text-align: center HTML বিকল্পটি হল text-align: center । এটি পুরানো ব্রাউজার এবং নতুনগুলির মধ্যে বেশিরভাগ ক্ষেত্রেই কাজ করে তবে এটিটি অসাধারণ বলে বিবেচিত হয় এবং এটি ওয়েব মান থেকে সরানো হয়েছে।

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

কিভাবে আমি অনুভূমিকভাবে অন্য <div> সিএসএস ব্যবহার করে <div> কেন্দ্র করতে পারি?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

শুধুমাত্র অনুভূমিক কেন্দ্র

আমার অভিজ্ঞতায়, অনুভূমিকভাবে একটি বাক্সকে কেন্দ্র করার সর্বোত্তম উপায় হল নিম্নোক্ত বৈশিষ্ট্যগুলি প্রয়োগ করা:

ধারক:

  • text-align: center; থাকা উচিত text-align: center;

কন্টেন্ট বক্স:

  • display: inline-block; উচিত display: inline-block;

ডেমো:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

এই ফীলল্ড দেখুন !

অনুভূমিক এবং উল্লম্ব উভয় কেন্দ্রীভূত

আমার অভিজ্ঞতায়, উভয় উল্লম্ব এবং অনুভূমিকভাবে একটি বক্সকে কেন্দ্র করার সর্বোত্তম উপায়টি অতিরিক্ত ধারক ব্যবহার করা এবং নিম্নলিখিত বৈশিষ্ট্যগুলি প্রয়োগ করা:

বাইরের ধারক:

  • display: table; উচিত display: table;

ভেতরের ধারক:

  • display: table-cell; উচিত display: table-cell;
  • vertical-align: middle; থাকা উচিত vertical-align: middle;
  • text-align: center; থাকা উচিত text-align: center;

কন্টেন্ট বক্স:

  • display: inline-block; উচিত display: inline-block;

ডেমো:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

এই ফীলল্ড দেখুন !


আচ্ছা, আমি এমন একটি সমাধান খুঁজে পেয়েছি যা সম্ভবত সমস্ত পরিস্থিতিতে মাপসই করবে, কিন্তু জাভাস্ক্রিপ্ট ব্যবহার করবে:

এখানে গঠন:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

এবং এখানে জাভাস্ক্রিপ্ট স্নিপেট হয়:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

আপনি যদি এটি একটি প্রতিক্রিয়াশীল পদ্ধতিতে ব্যবহার করতে চান, তবে আপনি নিম্নলিখিতটি যোগ করতে পারেন:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

আপনি এই মত কিছু করতে পারেন

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

এটি #inner উল্লম্বভাবে উল্লিখিত হবে। আপনি যদি চান না, display এবং vertical-align বৈশিষ্ট্য মুছে ফেলুন;


আপনি যদি এটি একটি প্রস্থ না দিলে এটি কেন্দ্র করা যাবে না, অন্যথায় এটি ডিফল্টভাবে পুরো অনুভূমিক স্থানটি গ্রহণ করবে।


আমি উল্লম্বভাবে এবং অনুভূমিকভাবে align কীভাবে দেখাবো এই example তৈরি করেছি।

কোড মূলত এই হয়:

#outer {
  position: relative;
}

এবং...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

এবং আপনার স্ক্রীনটি পুনরায় আকারে থাকলেও এটি center থাকবে।


আমি বুঝতে পেরেছি যে আমি খেলাটি বেশ দেরি করে ফেলেছি, কিন্তু এটি একটি খুব জনপ্রিয় প্রশ্ন, এবং আমি সম্প্রতি এমন একটি পদ্ধতি খুঁজে পেয়েছি যেখানে আমি এখানে যে কোনও জায়গায় উল্লেখ নেই দেখেছি, তাই আমি মনে করি আমি এটি নথিভুক্ত করব।

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

সম্পাদনা করুন: উভয় উপাদান সঠিকভাবে কাজ করতে একই প্রস্থ হতে হবে।


আমি সম্প্রতি একটি "লুকানো" div (যেমন, প্রদর্শন: none;) কে কেন্দ্র করতে হয়েছিল যার মধ্যে একটি টেবিলযুক্ত ফর্ম ছিল যা পৃষ্ঠাতে কেন্দ্রীভূত হতে হবে। আমি লুকানো ডিভিটিটি প্রদর্শন করতে নিম্নলিখিত jQuery টি লিখেছি এবং তারপরে সিএসএসটি স্বয়ংক্রিয়ভাবে তৈরি হওয়া সারণিতে আপডেট করুন এবং মার্জিনটিকে কেন্দ্রটিতে পরিবর্তন করুন। (প্রদর্শন টগল একটি লিঙ্ক ক্লিক করে ট্রিগার হয়, কিন্তু এই কোডটি প্রদর্শনের জন্য প্রয়োজনীয় ছিল না।)

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

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>


উদাহরণস্বরূপ, নীচের এই লিঙ্কটি এবং স্নিপেটটি দেখুন:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

যদি আপনার পিতামাতার অধীনে অনেক বাচ্চা থাকে, তাই আপনার সিএসএস সামগ্রীটি উচ্চারণে এই উদাহরণের মত হওয়া উচিত।

এইচটিএমএল কন্টেন্ট দেখতে পছন্দ করে:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

তারপর উষ্ণ উপর এই উদাহরণ দেখুন।


এই উপাদানগুলির জন্য প্রস্থ নির্ধারণ না করার জন্য আরেকটি সমাধান CSS 3 transform বৈশিষ্ট্য ব্যবহার করা হচ্ছে।

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

কৌশলটি হল #inner translateX(-50%) #inner তার নিজের প্রস্থের #inner উপাদান উপাদানটি 50 শতাংশ সেট করে। আপনি উল্লম্ব সারিবদ্ধকরণ জন্য একই কৌশল ব্যবহার করতে পারেন।

এখানে একটি অনুভূমিক অনুভূমিক এবং উল্লম্ব সারিবদ্ধ দেখাচ্ছে।

আরো তথ্য মজিলা বিকাশকারী নেটওয়ার্ক


এখানে আপনি সবচেয়ে ছোট উপায় চান কি।

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

এটা আমার উত্তর।

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>


ক্রিস কোয়ায়ার যিনি তার ব্লগে 'সেন্ট্রাল ইন দ্য অজানা' শীর্ষক একটি চমৎকার পোস্ট লিখেছেন। এটি একাধিক সমাধান একটি বৃত্তাকার। আমি এই পোস্টে পোস্ট করা হয় না যে একটি পোস্ট। এটিতে আরও ব্রাউজার সমর্থন থাকে তবে flexbox-সমাধান, এবং আপনি display: table; ব্যবহার করছেন না display: table; যা অন্যান্য জিনিস বিরতি পারে।

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

ধরুন আপনার div 200px প্রশস্ত:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

নিশ্চিত করুন যে প্যারেন্ট উপাদানটি আপেক্ষিক, নির্দিষ্ট, পরম, বা চটচটে অবস্থানযুক্ত।

যদি আপনি আপনার ডিভাইডের প্রস্থটি জানেন না তবে আপনি transform:translateX(-50%); ব্যবহার করতে পারেন transform:translateX(-50%); পরিবর্তে নেতিবাচক মার্জিন।

https://jsfiddle.net/gjvfxxdj/


ফ্লেক্সের 97% ব্রাউজারের সমর্থন কভারেজ রয়েছে এবং কয়েকটি লাইনের মধ্যে এই ধরণের সমস্যার সমাধান করার সেরা উপায় হতে পারে:

#outer {
  display: flex;
  justify-content: center;
}

যদি আপনি অভ্যন্তরীণ div তে একটি নির্দিষ্ট প্রস্থ নির্ধারণ করতে না চান তবে আপনি div মতো কিছু করতে পারেন:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

যে ভিতরের div একটি ইনলাইন উপাদান যা text-align সঙ্গে কেন্দ্রীভূত করা যেতে পারে।


সঙ্গে প্রায় বাজানো চেষ্টা করুন

margin: 0 auto;

আপনি যদি আপনার পাঠ্যকে কেন্দ্র করতে চান তবে ব্যবহার করে দেখুন:

text-align: center;

সহজতম পথ:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>



width সেট করুন এবং auto margin-left এবং margin-right সেট করুন। যে শুধুমাত্র অনুভূমিক , যদিও। আপনি উভয় উপায়ে চান, আপনি শুধু উভয় উপায়ে এটি করতে চাই। পরীক্ষা করতে ভয় পাবেন না; এটা আপনি কিছু ভাঙ্গা হবে না।





centering