প্রস্থ ছাড়াই একটি ডিভ ব্লক কেন্দ্র করে

Question

আমি যখন ডিভ ব্লক "পণ্যগুলি" কেন্দ্র করার চেষ্টা করি তখন আমার একটি সমস্যা হয় কারণ আমি ডিভি প্রস্থের অগ্রিম জানি না। কারও কি সমাধান আছে?

আপডেট: আমার সমস্যাটি হ'ল আমি জানি না আমি কয়টি পণ্য প্রদর্শন করব, আমার 1, 2 বা 3 পণ্য থাকতে পারে, আমি যদি তাদের পিতামাতার প্রস্থটি জানতাম তবে এটি একটি নির্দিষ্ট নম্বর ছিল তবে আমি তাদের কেন্দ্র করতে পারি দ্বি, সামগ্রীগুলি গতিশীল হলে আমি কীভাবে এটি করব তা আমি জানি না।

.product_container {
  text-align: center;
  height: 150px;
}

.products {
  height: 140px;
  text-align: center;
  margin: 0 auto;
  clear: ccc both; 
}
.price {
  margin: 6px 2px;
  width: 137px;
  color: #666;
  font-size: 14pt;
  font-style: normal;
  border: 1px solid #CCC;
  background-color:	#EFEFEF;
}

<div class="product_container">
  <div class="products" id="products">
    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>   

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>
  </div>
</div>

Comments

আপনার ঠিক কী সমস্যা হচ্ছে?

— anand.trex

Answer 1

আপডেট 27 ফেব্রুয়ারী 2015: আমার আসল উত্তরটি ভোট পেতে চলেছে, তবে এখন আমি সাধারণত এর পরিবর্তে @ ববিন্সের পন্থাটি ব্যবহার করি।

.child { /* This is the item to center... */
  display: inline-block;
}
.parent { /* ...and this is its parent container. */
  text-align: center;
}

Historicalতিহাসিক উদ্দেশ্যে আমার মূল পোস্ট:

আপনি এই পদ্ধতির চেষ্টা করতে চাইতে পারেন।

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"/>
</div>

এখানে মিলের শৈলী:

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

JSFiddle

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

আপনি পারে শেষে যে খালি div প্রয়োজন হলে আপনি "product_container" জন্য উচ্চতা মাপে আপনার "পণ্য" বিষয়বস্তু উপর নির্ভর করে।

Comments

আপনি যদি ডিভের overflow:hiddenজন্য সরবরাহ না করেন .product_containerতবে outer-centerএটির ডানদিকে কাছের অন্যান্য সামগ্রীগুলি ওভারল্যাপ করবে। অভ্যাসের ডানদিকে কোনও লিঙ্ক বা বোতাম outer-center। পটভূমির রং ব্যবহার করে দেখুন outer-centerপ্রয়োজনীয়তার বুঝতে overflow :hidden। এটি সিসিল থমাসের

— বেঞ্জল

এই পদ্ধতির ডেস্কটপ ওয়েবসাইটগুলির জন্য উপযুক্ত ... মোবাইলের অভ্যন্তরীণ ডিভগুলি ডানদিকে সংযুক্ত বলে মনে হচ্ছে। একটি সমাধান আছে কি?

— মিচ ডার্ট

আমাকে এই সম্পর্কে বলুন! কখনও কখনও আমাদের কেবল একটি সমাধান প্রয়োজন এবং পছন্দ করার জন্য ভাল থাকার বিলাসিতা নেই। একটি একক কক্ষের টেবিল আরেকটি বিকল্প, যদিও একটি কক্ষের একটি টেবিল সত্যিই একটি টেবিল নয়?

— মাইক এম লিন

@fgysin সম্মত, এটি একটি পাল্টা স্বজ্ঞাত হ্যাক। এবং ডিজাইনাররা ভাবছেন যে লোকেরা এখনও টেবিল ভিত্তিক বিন্যাসে ফিরে যাওয়ার বিষয়টি বিবেচনা করছেন।

— ইয়াক

এই প্রশ্নটি পাঁচ বছরের পুরনো। এই উত্তরটির মেয়াদ শেষ হয়ে গেছে তবে শুরু করার সাথে এটি কখনও মার্জিত ছিল না। আপনার যা করা উচিত তা হল ডিসপ্লে ব্যবহার: ইনলাইন-ব্লক

— ওয়াই বোলিং

Answer 2

'ডিসপ্লে: ব্লক' সহ একটি উপাদান (ডিভটি ডিফল্ট হিসাবে হয়) এর ধারকটির প্রস্থ দ্বারা প্রস্থ নির্ধারিত হয়। আপনি কোনও ব্লকের প্রস্থের বিষয়বস্তুর প্রস্থের উপর নির্ভর করতে পারবেন না (সঙ্কুচিত থেকে ফিট)।

(সিএসএস ২.১-তে 'ফ্লোট: বাম / ডান' ব্লকগুলি বাদে, তবে কেন্দ্রীকরণের জন্য এটি কোনও কাজে আসে না))

কোনও ব্লককে সঙ্কুচিত-থেকে-ফিট বস্তুতে পরিণত করতে আপনি 'প্রদর্শন' সম্পত্তিটি 'ইনলাইন-ব্লক'-এ সেট করতে পারেন যা তার পিতামাতার পাঠ্য-প্রান্তিককরণ সম্পত্তি দ্বারা নিয়ন্ত্রিত হতে পারে তবে ব্রাউজার সমর্থনটি দাগযুক্ত। আপনি যদি সেই পথে যেতে চান তবে আপনি বেশিরভাগ হ্যাকগুলি ব্যবহার করে এটিকে ছাড়তে পারেন (উদাঃ -মোজ-ইনলাইন-স্ট্যাক দেখুন)।

যাওয়ার অন্য উপায়টি হ'ল টেবিলগুলি। আপনার প্রয়োজনীয় কলামগুলি যখন এর প্রস্থটি আগে থেকেই জানা যায় না তখন এটি প্রয়োজনীয় হতে পারে। আমি সত্যিই বলতে পারে না উদাহরণস্বরূপ কোড থেকে চেষ্টা করছি কি - সেখানে যে হবে সুস্পষ্ট কিছুই নেই প্রয়োজন একটি সঙ্কুচিত-টু-ফিট ব্লক - কিন্তু পণ্যগুলির একটি তালিকা সম্ভবত ট্যাবুলার বিবেচনা করা যেতে পারে।

[পুনশ্চ. ওয়েবে ফন্ট আকারের জন্য 'pt' ব্যবহার করবেন না। 'পিক্স' আরও নির্ভরযোগ্য যদি আপনার সত্যিকারের স্থির আকারের পাঠ্যের প্রয়োজন হয়, অন্যথায় '%' এর মতো আপেক্ষিক ইউনিট আরও ভাল। এবং "ক্লিয়ার: সিসিসি উভয়" - একটি টাইপো?]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle

Comments

অভিভাবক -> পাঠ্য-সারিবদ্ধ: কেন্দ্র | শিশু-> প্রদর্শন: ইনলাইন-ব্লক

— এমডস্কিনার

display: inline-blockফায়ারফক্সের আই 7 এবং পুরানো সংস্করণগুলিতে সমর্থিত নয়

— জ্যাক উইলসন

@ জ্যাকোবুদ, আই 7 এর জন্য "প্রদর্শন: ইনলাইন; জুম: 1;" "প্রদর্শন: ইনলাইন-ব্লক;" এর পরিবর্তে। এটি ব্লক উপাদানগুলির জন্য কাজ করে।

— মিহাইল-হরিতোনভ

এই পদ্ধতিটি ক্রস ব্রাউজারটি কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আরও তথ্যের জন্য এই লিঙ্কটি পরীক্ষা করে দেখুন - blog.mozilla.org/webdev/2009/02/20/cross-browser-inline- block

— কিওকে

আমি এটি প্রয়োগ করতে এই এসএসএস ব্যবহার করেছি, যা এটির সমর্থনের জন্য আপনার এইচটিএমএল কাঠামো যতক্ষণ কাজ করবে ততক্ষণ কাজ করবে:। সেন্টার {টেক্সট-সারিবদ্ধ: কেন্দ্র; &: প্রথম-শিশু {প্রদর্শন: ইনলাইন-ব্লক; }}

— ডোভভ হেফেটজ

Answer 3

বেশিরভাগ ব্রাউজারগুলি display: table;সিএসএস বিধিটিকে সমর্থন করে । text-align: center;অন্তর্ভুক্ত ডিভের জন্য গতিশীল প্রস্থ রেখে, অতিরিক্ত এইচটিএমএল যোগ না করে বা কনটেইনারটিতে বাধা শৈলীর প্রয়োগ না করে (যেমন ধারকটিতে সমস্ত অন্যান্য ইনলাইন সামগ্রীকে কেন্দ্র করে) এই পাত্রে ডিভকে কেন্দ্র করার জন্য এটি একটি ভাল কৌশল:

এইচটিএমএল:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

সিএসএস:

.centered { display: table; margin: 0 auto; }

.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

---

আপডেট (2015-03-09):

এটি করার সঠিক উপায় হ'ল আসলে ফ্লেক্সবক্স বিধিগুলি ব্যবহার করা use ব্রাউজার সমর্থনটি কিছুটা বেশি সীমাবদ্ধ ( সিএসএস টেবিল সমর্থন বনাম ফ্লেক্সবক্স সমর্থন ) তবে এই পদ্ধতিটি আরও অনেক কিছুই মঞ্জুরি দেয় এবং এই ধরণের আচরণের জন্য নিবেদিত সিএসএস নিয়ম:

এইচটিএমএল:

<div class="container">
  <div class="centered">This content is centered</div>
</div>

সিএসএস:

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

Comments

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

— ড্যান জোন্স

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

— জোর্হেহ

display: table;বৈকল্পিক সিউডো-উপাদানের (জন্য আদর্শ ::before, ::after) যেখানে আপনি অতিরিক্ত মার্কআপ জুড়তে পারবেন না, এবং আপনি সংলগ্ন উপাদান শৈলী এড়াতে ব্যাহত করতে চান।

— ওয়ালফ

Answer 4

এই বিড়ালটির ত্বকের ছয়টি উপায়:

এক বোতাম: প্রকারের display: blockযে কোনও কিছুই পুরো পিতামাতার প্রস্থকে ধরে নিবে। (যদি না সঙ্গে মিলিত floatবা display: flexপিতা বা মাতা)। সত্য। খারাপ উদাহরণ।

বাটন 2: এর জন্য display: inline-blockযাওয়ার ফলে স্বয়ংক্রিয়ভাবে (সম্পূর্ণ পরিবর্তে) প্রস্থে যাবে। তারপরে আপনি text-align: center মোড়ানো ব্লকটি ব্যবহার করে কেন্দ্র করতে পারেন । এমনকি 'মদ' ব্রাউজারগুলির সাথে সম্ভবত সবচেয়ে সহজ এবং সবচেয়ে ব্যাপকভাবে সামঞ্জস্যপূর্ণ ...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

বাটন 3: মোড়কে কোনও জিনিস রাখার দরকার নেই। সুতরাং সম্ভবত এটি সবচেয়ে মার্জিত সমাধান। উল্লম্বভাবে কাজ করে। (ট্রান্সস্ট্লেটের জন্য ব্রাউজার সমর্থন যথেষ্ট ভাল (≥IE9) আজকাল ...)।

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

বিটিডব্লিউ: অজানা উচ্চতার ব্লকগুলি উল্লম্বভাবে কেন্দ্র করার জন্যও এক দুর্দান্ত উপায় (পরম অবস্থানের সাথে সম্পর্কিত)।

বাটন 4: নিখুঁত অবস্থান। কেবলমাত্র মোড়কে যথেষ্ট উচ্চতা সংরক্ষণ করার বিষয়টি নিশ্চিত করুন, যেহেতু অন্য কেউ হবে না (ক্লিয়ারফিক্স বা অন্তর্নিহিত ...)

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

বোতাম 5: ফ্লোট (যা ব্লক-স্তরের উপাদানগুলিকে গতিশীল প্রস্থেও নিয়ে আসে) এবং আপেক্ষিক শিফট। যদিও আমি বনের মধ্যে এটি কখনও দেখিনি। সম্ভবত অসুবিধা আছে ...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

আপডেট: বোতাম 6: এবং আজকাল, আপনি ফ্লেক্স-বাক্সও ব্যবহার করতে পারেন। দ্রষ্টব্য, স্টাইলগুলি কেন্দ্রিক বস্তুর মোড়ক প্রযোজ্য।

.wrapSix
  display: flex
  justify-content: center

Source সম্পূর্ণ উত্স কোড (স্টাইলাস সিনট্যাক্স)

Answer 5

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

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

আশা করি এটা সাহায্য করবে!

Answer 6

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

যদি লক্ষ্য উপাদানটি একেবারে অবস্থিত থাকে তবে আপনি এটি 50% এক দিকে ( left: 50%) চালিত করে এবং তারপরে বিরোধী দিকের 50% রূপান্তর করে এটি কেন্দ্র করতে পারেন transform:translateX(-50%)। এটি লক্ষ্য উপাদানটির প্রস্থ (বা সহ width:auto) নির্ধারণ না করে কাজ করে । মূল উপাদানটির অবস্থান স্থিতিশীল, পরম, আপেক্ষিক বা স্থির হতে পারে।

Comments

এটি আপনি যে জিনিসটিকে কেন্দ্র করছেন তার অর্ধ প্রস্থের মধ্যে এটি কেন্দ্রের বাইরে থাকবে।

— 4:55

@ 4imble না এটি হবে না। "বাম" সম্পত্তি এটিকে 50% (তার পিতামাতার প্রস্থের 50%) স্থানান্তর করে, এবং ট্রান্সলেট এক্স (-50%) এটিকে অন্যভাবে 50% (লক্ষ্য উপাদানটির প্রস্থের 50%) স্থানান্তরিত করে।

— পশ্চিম 1

আহ্ হ্যাঁ, আমি অনুবাদটি মিস করেছি। আইই ১১ এর আগে এটি কোনও আইইতে নির্ভরযোগ্য তা নিশ্চিত নয় তবে আপনি ঠিকই বলেছেন।

— ইঞ্চি

Answer 7

ডিফল্টরূপে, divউপাদানগুলি ব্লক উপাদান হিসাবে প্রদর্শিত হয়, সুতরাং তাদের 100% প্রস্থ হয়, এগুলি অর্থহীন করে তোলে। সংক্ষিপ্তর দ্বারা প্রস্তাবিত হিসাবে, আপনাকে অবশ্যই একটি নির্দিষ্ট করতে হবে widthএবং এর পরে autoযখন marginকেন্দ্র নির্দিষ্ট করতে থাকে তখন আপনি ব্যবহার করতে পারেন div।

বিকল্পভাবে, আপনি জোরও করতে পারেন display: inline, তবে তারপরে আপনার কাছে এমন কিছু রয়েছে যা বেশিরভাগ spanপরিবর্তে এর পরিবর্তে এর মতো আচরণ করে div, যাতে এটি বোঝা যায় না।

Answer 8

এটি অর্ড তালিকা, বা আনর্ডারড তালিকা বা কোনও উপাদান হিসাবে কোনও উপাদানকে কেন্দ্র করবে। কেবল এটিকে বহির্মুখের শ্রেণীর সাথে একটি ডিভ দিয়ে মুড়িয়ে দিন এবং অভ্যন্তরীণ উপাদানটিকে অন্তর্নির্ময়ের শ্রেণি দিন।

আউটআরলেটমেন্ট ক্লাসটি আইই, পুরানো মজিলা এবং সবচেয়ে নতুন ব্রাউজারগুলির জন্য অ্যাকাউন্ট করে accounts

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 

Comments

আপনার কোড সহ একটি বিবরণ যোগ করুন। নিজস্ব কোড পোস্ট করা এসও এর ভবিষ্যতের দর্শকদের পক্ষে বেশি বোঝায় না।

— রেন

Answer 9

ন্যায়সঙ্গত-সামগ্রী সহ CSS3 ফ্লেক্সবক্স ব্যবহার করুন: কেন্দ্র;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

Answer 10

মাইক এম লিনের উত্তরে কিছুটা ভিন্নতা

যদি আপনি এতে overflow: auto;(বা hidden) যোগ করেন div.product_containerতবে আপনার প্রয়োজন হবে না div.clear।

এটি এই নিবন্ধটি থেকে প্রাপ্ত -> http://www.quirksmode.org/css/cleering.html

এইচটিএমএল পরিবর্তিত হয়:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

এবং এখানে সিএসএস সংশোধন করা হয়েছে:

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

কারণ ছাড়াই কেন এটি ভাল div.clear(পৃথকভাবে একটি খালি উপাদান থাকা ভুল বলে মনে হয়) তা হল ফায়ারফক্সের অতিমাত্রায় মার্জিন নিয়োগ।

উদাহরণস্বরূপ, যদি আপনার এই এইচটিএমএল থাকে:

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

তারপরে, ফায়ারফক্সে (লেখার সময় 8.0), আপনি আগে11px মার্জিন দেখতে পাবেন । সবচেয়ে খারাপটি হ'ল এটি হ'ল আপনি পুরো পৃষ্ঠার জন্য একটি উল্লম্ব স্ক্রোল বার পাবেন, এমনকি যদি সামগ্রীটি স্ক্রিনের মাত্রায় সুন্দরভাবে ফিট করে। product_container

Answer 11

এই নতুন সিএসএস এবং মার্কআপ চেষ্টা করুন

এইচটিএমএল পরিবর্তিত হয়:

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

এবং এখানে সিএসএস সংশোধন করা হয়েছে:

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

Answer 12

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

আপনি যদি "ওভারফ্লো: লুকানো" "" সরবরাহ করেন না তবে "উত্পাদক_কন্টেইনার" "বহিরাগত-কেন্দ্র" ডিভটি এর ডানদিকে কাছের অন্যান্য সামগ্রীকে ওভারল্যাপ করবে। "বাইরের-কেন্দ্র" ডানদিকে কোনও লিঙ্ক বা বোতাম অভ্যাস কাজ করে না। "ওভারফ্লো: লুকানো" এর প্রয়োজনীয়তা বোঝার জন্য "বাহ্যিক-কেন্দ্রের" জন্য ব্যাকগ্রাউন্ড রঙ চেষ্টা করুন

Answer 13

আমি আকর্ষণীয় সমাধান পেয়েছি, আমি স্লাইডার তৈরি করছিলাম এবং স্লাইড নিয়ন্ত্রণগুলি কেন্দ্র করতে হয়েছিল এবং আমি এটি করেছি এবং ভাল কাজ করি। আপনি পিতামাতার সাথে আপেক্ষিক অবস্থান যুক্ত করতে পারেন এবং সন্তানের অবস্থান উল্লম্বভাবে সরান। একবার দেখুন http://jsfiddle.net/bergb/6DvJz/

সিএসএস:

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

এইচটিএমএল:

<div id="parent">
    <div id="child">voila</div>
</div>

Answer 14

কি display:table;এবং সেট marginকরারauto

কোডের গুরুত্বপূর্ণ বিট:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

আপনি এখন কতগুলি উপাদান পেয়েছেন তা কেন্দ্রে স্বয়ংক্রিয়ভাবে প্রান্তিক হবে

কোড স্নিপেট উদাহরণ:

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}

<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

Answer 15

আমি ভীতরূপে স্পষ্টভাবে প্রস্থটি নির্দিষ্ট করে না দিয়ে এটি করার একমাত্র উপায় হ'ল (হাঁফানো) সারণীগুলি ব্যবহার করা।

Comments

পুনঃব্যবসিত: আপনি যদি সিএসএস, নেস্টেড ডিআইভি এবং ব্রাউজারগুলির সমস্ত ধরণের সংমিশ্রণ চেষ্টা করে পরের ঘন্টাটি ব্যয় করতে না চান তবে সরাসরি টেবিলগুলিতে যান।

— এডুয়ার্ডো মোল্টেনি

টেবিলগুলি ডিজাইনের উপাদান হিসাবে ব্যবহার করার জন্য ডিজাইন করা হয়নি। এটা খারাপ শৈলী।

— Sebi2020

Answer 16

ক্রেপি ঠিক করা, তবে এটি কাজ করে ...

সিএসএস:

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

এইচটিএমএল:

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

Answer 17

পুরানো ব্রাউজারগুলিতে কাজ করা সহজ ফিক্স (তবে টেবিলগুলি ব্যবহার করে এবং উচ্চতা সেট করার প্রয়োজন হয়):

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

Answer 18

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

অভ্যন্তরীণ ডিভসের স্প্যান স্থিতি ব্যবহার করুন

<div class="container_box">
   <span class="content">Hello</span>
</div>

Answer 19

আমি জানি এই প্রশ্নটি পুরানো, তবে আমি এটিতে একটি ক্র্যাক নিচ্ছি। ববিন্সের উত্তরের সাথে খুব কার্যকর তবে কার্যকরী কোড উদাহরণের সাথে।

প্রতিটি পণ্য একটি ইনলাইন-ব্লক করুন। ধারকটির বিষয়বস্তু কেন্দ্র করে। সম্পন্ন.

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

আরও দেখুন: সিএসএসে গতিশীল প্রস্থ সহ কেন্দ্রের ইনলাইন-ব্লক

Comments

এই উত্তরটি ইতিমধ্যে একই সমাধান সরবরাহ করে না? stackoverflow.com/a/284064/547733

— ম্যাক্সিম রসিন

ঠিক বলেছেন, ম্যাডমক্স! যদিও এটি এতটা শক্তিশালী নয়। এছাড়াও আমি বুঝতে পেরেছি যে বাম বা ডানদিকে পাঠ্য-প্রান্তিককরণটি সেট করার অর্থ এটি কোনও অনুবাদে এমন কোনও সাইটে কাজ করবে না যার মধ্যে বাম থেকে ডান পাঠের ক্রমটি ডান থেকে বামে সরিয়ে নেওয়া অন্তর্ভুক্ত। পাঠ্য-প্রান্তিককরণ পাঠ্য প্রান্তিককরণের জন্য, উপাদানগুলির জন্য নয়। আদর্শভাবে অদূর ভবিষ্যতে আমরা প্রদর্শন উপর নির্ভর করবে: এই ধরণের জিনিস জন্য নমনীয়।

— ওয়াই বোলিং

Answer 20

উপাদানগুলির অভ্যন্তরের প্রস্থটি না জেনে একটি ডিভের মধ্যে যে কোনও কিছুকে কেন্দ্র করার এটি একটি উপায়।

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 21

আমার সমাধানটি ছিল:

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}

Answer 22

এই CSS টি আপনার product_container ক্লাসে যুক্ত করুন

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;

Comments

প্রশ্নটি বিশেষত "প্রস্থ ছাড়াই" বলেছে

— ডেজ উডেজু