অন্য ডিভের মধ্যে ভাসমান ডিভগুলি কেন্দ্র করে

Question

আমি অন্যান্য প্রশ্নগুলি অনুসন্ধান করেছি এবং, যদিও এই সমস্যাটি অন্য কয়েকজনের সাথে একই রকম মনে হচ্ছে, আমি এখনও পর্যন্ত যা কিছু দেখিনি তা মনে হচ্ছে যে আমি সমস্যাটি সমাধান করছি।

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

আপনি নীচের কোড থেকে দেখতে পাচ্ছেন, আমি উভয় overflow:hiddenএবং margin:x autoপিতামাতার ডিভগুলি ব্যবহার করার চেষ্টা করেছি এবং আমি clear:bothফটোগুলির পরে একটি (অন্য বিষয়ে পরামর্শ হিসাবে) যুক্ত করেছি । কিছুতেই কোনও পার্থক্য মনে হচ্ছে না।

ধন্যবাদ. আমি কোন পরামর্শ প্রশংসা করি।

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>

Comments

সম্ভাব্য সদৃশ আমি কীভাবে ভাসমান উপাদানগুলিকে কেন্দ্র করব?

— টাইলার 18

@TylerH কীভাবে আসবেন? যখন জিজ্ঞাসা করা হয়েছিল কেবল তারিখটি দেখুন। আপনার লিঙ্কে প্রশ্নের মতো মনে হচ্ছে আসল সদৃশ।

— প্রাগম্যাটিক

@ThePragmatick কারন যে কারও দ্বিগুণ মতামত, আরও উত্তর, আরও (এবং আরও সাম্প্রতিক) ক্রিয়াকলাপ রয়েছে এবং এর শব্দাবলীর তুলনায় এটি একটি আরও ভাল ক্যানোনিকাল প্রশ্ন হিসাবে কাজ করে।

— টাইলার এইচ

Answer 1

প্রথমে floatঅভ্যন্তরীণ বৈশিষ্ট্যগুলি সরিয়ে ফেলুন div। তারপরে, text-align: centerমূল বাইরের উপর রাখুন div। এবং অভ্যন্তরীণ divগুলি জন্য, ব্যবহার করুন display: inline-block। তাদের সুস্পষ্ট প্রস্থও দেওয়া বুদ্ধিমান হতে পারে।

---

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

Comments

@ ড্যারেন: আপনি চেষ্টা করার পরে কি ভাসমান থামলেন? আপনি যতক্ষণ না ভাসাচ্ছেন / যতক্ষণ না আপনি ভাসমানের পাত্রে একটি নির্দিষ্ট প্রস্থ নির্ধারণ করেন ততক্ষণ আপনি যা করতে চান তা অর্জন করতে সক্ষম হবেন না।

— কেন ব্রাউনিং

ওহ ... আমি ভুল ভাসাটি অপসারণ করা দেখে মনে হচ্ছে এটি আমার যা ইচ্ছা ঠিক তা পূরণ করে। আমি নিশ্চিত যে আমি কেন বুঝতে পেরেছি না তবে ... আপনাকে অনেক ধন্যবাদ you

— ড্যারেন

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

— সাম্পসন

এই চিত্রটি ব্যর্থ হতে শুরু করে যখন কিছু চিত্রের ক্যাপশনগুলি মোড়ানোর জন্য যথেষ্ট দীর্ঘ হয়। অন্য কোন পরামর্শ?

— গ্রেগডকিন্ডেল

কিছু নয়, পাওয়া গেছে যে ভিন্ন-লাইন-গণনা শিরোনাম সমস্যাটি 'উল্লম্ব-সারিবদ্ধ: শীর্ষ' দিয়ে সমাধান করা যেতে পারে। =)

— গ্রেগ। গাইন্ডেল

Answer 2

সঙ্গে flexbox আপনি সহজেই অনুভূমিকভাবে (এবং উল্লম্বভাবে) কেন্দ্রীভূত করতে পারে শিশুদের বাড়ালো একটি div ভিতরে।

সুতরাং আপনার যদি এর মতো সরল মার্কআপ থাকে:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

সিএসএস সহ:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(এটি (প্রত্যাশিত - এবং অযাচিত) ফলাফল )

এবার মোড়কে নিম্নলিখিত বিধিগুলি যুক্ত করুন:

display: flex;
justify-content: center; /* align horizontal */

এবং ভাসমান শিশুরা সারিবদ্ধ কেন্দ্র ( ডেমো ) পান

কেবল মজাদার জন্য, উল্লম্ব সারিবদ্ধতা পেতে কেবল যুক্ত করুন:

align-items: center; /* align vertical */

ডেমো

Comments

এখনও ব্রাউজার-সামঞ্জস্যতা পরীক্ষা করতে হবে, কিন্তু এটি দুর্দান্ত বলে মনে হচ্ছে!

— low_rents

আপনি প্রদর্শনটি ব্যবহার করতে পারেন: ডিভিডকে কেন্দ্র করে ফ্লেক্সের পরিবর্তে ইনলাইন। সাফারি এবং অপেরা নিয়ে ফ্লেক্সের সমস্যা রয়েছে।

— আপনি

ইনলাইন আমার সাথে কাজ করে না। এই সমাধানটির সমস্যা হ'ল বাক্সগুলি ২ য় লাইনে যাবে না যদি তারা ডিভের প্রস্থকে উপচে ফেলে। সুতরাং আপনি আসলে তাদের একটি টেবিলে পরিণত করেছেন ...

— পাভেল জিরি স্ট্রানাড

Answer 3

আমি আপেক্ষিক অবস্থান এবং ডানদিকে ভাসমান ব্যবহার করে উপরেরটি সম্পাদন করেছি।

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

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

সিএসএস:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

জেএসফিডাল: http://jsfiddle.net/MJ9yp/

এটি IE8 এবং এটিতে কাজ করবে তবে এর আগে নয় (আশ্চর্য, অবাক!)

দুর্ভাগ্যক্রমে আমি এই পদ্ধতির উত্সটি স্মরণ করি না, তাই আমি মূল লেখককে ক্রেডিট দিতে পারি না। অন্য কারও জানা থাকলে লিঙ্কটি পোস্ট করুন!

Comments

+1 এটি সুন্দরভাবে কাজ করে। গৃহীত উত্তরটি আমার পক্ষে কার্যকর হয়নি। এটি উল্লম্ব প্রান্তিককরণের সমস্যা তৈরি করেছে ...

— টিমএইচ - কোডিড্যাক্ট

@ টিম এই পার্টিতে লেট, আমি জানি, তবে উল্লম্ব সারিবদ্ধকরণের বিষয়টি কনটেইনারটিতে 'উল্লম্ব-সারিবদ্ধ: শীর্ষ' যুক্ত করে স্থির করা যেতে পারে

— অ্যালফি

দুঃখিত, আমি অভ্যন্তর ভাগ বলতে চাইছি, ধারক ডিভ * নয়

— অ্যালফি

এটি প্রায় নিখুঁত কাজ করে। ওভারফ্লো যদি আইটেমগুলি পরের লাইনে যাচ্ছে তবে তারা যখন তা কেন্দ্রিক নয়।

— পাভেল জিরি স্ট্রানাড

Answer 4

নিম্নলিখিত সমাধানটি ইনলাইন ব্লক ব্যবহার করে না। তবে এর জন্য দুটি সহায়ক ডিভ প্রয়োজন:

1. বিষয়বস্তু ভাসা হয়
2. অভ্যন্তরীণ সহায়কটি ভাসমান (এটি সামগ্রীর মতো প্রসারিত)
3. অভ্যন্তরীণ সহায়কটি ডানদিকে 50% ঠেলাঠেলি করা হয় (এর বাম বাহ্যিক সহায়িকার কেন্দ্রের সাথে প্রান্তিক হয়)
4. সামগ্রীটি 50% বাম দিকে টানা হয় (এর কেন্দ্রটি অভ্যন্তরীণ সহায়কের বামে প্রান্তিক হয়)
5. বাহ্যিক সাহায্যকারী ওভারফ্লো লুকানোর জন্য সেট করা আছে

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}

<div class="ca-outer">
  <div class="ca-inner">
    <div class="content">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  </div>
</div>
<hr>
<div class="ca-outer">
  <div class="ca-inner">
    <ul class="content">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>
    </ul>
  </div>
</div>

Answer 5

display: inline-block;কোনও আইই ব্রাউজারে কাজ করবে না। এখানে আমি ব্যবহার করেছি।

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

Answer 6

সমাধান:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #outer {
                text-align:center;
                width:100%;
                height:200px;
                background:red;
            }
            #inner {
                display:inline-block;
                height:200px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
        </div>
    </body>
</html>

Comments

এই সমাধানটি অফ-টপিক। অভ্যন্তরটি ভাসমান হওয়া উচিত: ওপির প্রয়োজনীয়তাগুলি পূরণ করতে বামে।

— s15199d

Answer 7

আমার ক্ষেত্রে, আমি আমার পক্ষে কাজ করার জন্য @ স্যাম্পসন দ্বারা উত্তর পেতে পারি না, সর্বোপরি আমি পৃষ্ঠায় কেন্দ্রিক একটি কলাম পেয়েছি। প্রক্রিয়াটিতে যাইহোক, আমি শিখেছি কীভাবে ভাসাটি আসলে কাজ করে এবং এই সমাধানটি তৈরি করে। এর মূলে ঠিক করা খুব সহজ তবে এই থ্রেডটির দ্বারা স্পষ্টভাবে পাওয়া শক্ত যেটি এই পোস্টের সময়ে উল্লেখ না করেই 146k এর বেশি ভিউ পেয়েছে।

যা প্রয়োজন তা হ'ল স্ক্রিন স্পেসের প্রস্থের পরিমাণ যে মোটামুটি পছন্দসই লেআউটটি দখল করবে তার পরে পিতামাতাকে একই প্রস্থ তৈরি করবে এবং মার্জিন প্রয়োগ করবে: অটো। এটাই!

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

উদাঃ (প্রতিটি উপাদানটির 2 টি পক্ষ থাকে তাই সীমানা, মার্জিন এবং প্যাডিংগুলি x 2 দিয়ে গুণিত হয়)

সুতরাং যে উপাদানটির 10px, সীমানা 2px, মার্জিন 6px, প্যাডিং 3px প্রস্থ রয়েছে তার মতো দেখতে হবে: 10 + 4 + 12 + 6 = 32

তারপরে আপনার উপাদানগুলির মোট মোট প্রস্থ একসাথে যুক্ত করুন।

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

এই উদাহরণে "বাহ্যিক" ডিভের প্রস্থ হবে 112।

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60 */
    margin: 10px;
    /* 6 borders x 10px = 60 */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}

<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>

Comments

এই আমি উত্তর খুঁজছিলাম, ধন্যবাদ। আপনার প্রয়োজনীয় পিক্সেলটি আপনি কীভাবে গণনা করবেন? আমার কাছে পরিষ্কার নয়।

— সিলভারসার্ফার