আমি কীভাবে আমার ডিভগুলি আনুভূমিকভাবে সারিবদ্ধ করতে পারি?

Question

কিছু কারণে আমার ডিভগুলি কোনও ডিভযুক্ত ডিভের মধ্যে অনুভূমিকভাবে কেন্দ্র করবে না:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

এবং কখনও কখনও এটিতে কেবল একটি ব্লক ডিভ সহ একটি সারি ডিভ থাকে। আমি কি ভুল করছি?

Comments

খুব ভাল লিঙ্ক: w3schools.com/css/css_inline-

— block.asp

Answer 1

আপনি যা করার চেষ্টা করছেন তা অর্জন করতে:

display: inline-blockপরিবর্তে ব্যবহার বিবেচনা করুন float।

Answer 2

এটা চেষ্টা কর:

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with ability to provide width/height
}​

ডেমো

• থাকার margin: 0 auto;সঙ্গে বরাবর width: 100%বেহুদা কারণ আপনার উপাদান পূর্ণ স্থান নিতে হবে।

• float: leftকোনও স্থান বাকি না হওয়া অবধি উপাদানগুলি বাম দিকে ভাসিয়ে দেবে, সুতরাং তারা একটি নতুন লাইনে যাবে। display: inline-blockউপাদানগুলিকে ইনলাইন প্রদর্শন করতে সক্ষম হতে ব্যবহার করুন , তবে আকার সরবরাহের দক্ষতার সাথে ( display: inlineযেখানে প্রস্থ / উচ্চতা উপেক্ষা করা হবে তার বিপরীতে )

Answer 3

সিএসএসে প্রান্তিককরণগুলি ছিল একটি দুঃস্বপ্ন। ভাগ্যক্রমে, ডাব্লু 3 সি 2009 সালে একটি নতুন স্ট্যান্ডার্ড চালু করেছে: ফ্লেক্সিবল বক্স । এটি সম্পর্কে এখানে একটি ভাল টিউটোরিয়াল আছে । ব্যক্তিগতভাবে আমি এটি অন্যান্য পদ্ধতির তুলনায় অনেক বেশি যৌক্তিক এবং বোঝার পক্ষে সহজ মনে করি।

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

Comments

ডিভগুলি সারিবদ্ধ করার জন্য এটি দুর্দান্ত উপায়! এবং হ্যাঁ ... সিএসএসে প্রান্তিককরণ অনেক দীর্ঘ সময়ের জন্য দুঃস্বপ্ন হয়ে গেছে!

— মাইকেল কনিকনার্ন

Answer 4

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

<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

.row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* for centering 3 blocks in the center */
  /* justify-content: space-between; for space in between */ 
}
.block {
  width: 100px;
}

সর্বশেষ প্রবণতা হ'ল ফ্লোট ব্যবহার না করে ফ্লেক্স বা সিএসএস গ্রিড ব্যবহার করা। তবে, এখনও কিছু 1% ব্রাউজার ফ্লেক্সকে সমর্থন করে না। তবে যিনি যাইহোক সত্যই পুরানো IE ব্যবহারকারীদের সম্পর্কে চিন্তা করেন;)

ফ্রেড: এখানে চেক করুন

Answer 5

ব্যবহারের আর একটি উদাহরণdisplay: inline-blocktext-align: center

এইচটিএমএল :

<div class='container'>
    <div class='row'>
        <div class='btn'>Hello</div>
        <div class='btn'>World</div>
    </div>
    <div class='clear'></div>
</div>

সিএসএস :

.container {
    ...
}
.row {
    text-align: center;
}
.btn {
    display: inline-block;
    margin-right: 6px;
    background-color: #EEE;
}
.clear {
    clear: both;
}

ফিডল: http://jsfiddle.net/fNvgS/

Answer 6

যদিও এই প্রশ্নটি coveringেকে রাখেনি (কারণ আপনি ধারকটির <div>অভ্যন্তরে গুলি প্রান্তিককরণ করতে চান ) তবে সরাসরি সম্পর্কিত: আপনি যদি কেবল একটি ডিভ আনুভূমিকভাবে সারিবদ্ধ করতে চান তবে আপনি এটি করতে পারেন:

#MyDIV
{
    display: table;
    margin: 0 auto;
}

Answer 7

যদি উপাদানগুলি এক লাইনে প্রদর্শিত হয় এবং IE 6/7 কোনও বিষয় না করে তবে এর পরিবর্তে display: tableএবং এর display: table-cellপরিবর্তে বিবেচনা করুন float।

inline-blockউপাদানগুলির মধ্যে অনুভূমিক ফাঁকগুলি নিয়ে যায় এবং ফাঁকগুলি শূন্য করার প্রয়োজন হয়। সর্বাধিক সহজ উপায় হ'ল font-size: 0পিতামাত্ত্বিক উপাদানগুলির জন্য সেট করা এবং তারপরে font-sizeসন্তানের উপাদানগুলির একটি বা মানকে display: inline-blockসেট করে পুনরুদ্ধার করা ।font-sizepxrem

Answer 8

আমি গ্রহণযোগ্য উত্তর চেষ্টা করেছিলাম, কিন্তু শেষ পর্যন্ত খুঁজে পেয়েছি:

margin: 0 auto;
width: anything less than 100%;

এখনও পর্যন্ত ভাল কাজ করে।

Answer 9

যখন আমার অনুভূমিক ডিভ সারিবদ্ধকরণ পরিচালনা করতে হবে তখন আমি এই দুটি পদ্ধতি ব্যবহার করেছি।
প্রথম ( মার্জিন সম্পত্তি ব্যবহার করে কেন্দ্র সারিবদ্ধ ):

.center-horizontal-align {
    margin-left: auto;
    margin-right: auto;
    width: (less than 100%) or in px
}

বাম এবং ডান মার্জিনগুলিকে স্বয়ংক্রিয়ভাবে সেট করা নির্দিষ্ট করে যে তাদের উপলব্ধ মার্জিনটিকে সমানভাবে বিভক্ত করা উচিত। প্রস্থটি 100% হলে কেন্দ্র-সারিবদ্ধকরণের কোনও প্রভাব নেই।

এবং দ্বিতীয়:

.center-horizontal-align {
    display: table
    margin-left: auto;
    margin-right: auto;
}

যখন আপনার বেশ কয়েকটি উপাদান থাকে এবং দ্বিতীয়টি ব্যবহার করা সুবিধাজনক হয় এবং আপনি চান যে সেগুলি সমস্তই একটি টেবিল ঘরে কেন্দ্রীভূত হয় (অর্থাত্ একটি ঘরে কয়েকটি বোতাম)।