একটি ভাসমান সারিবদ্ধ: মাঝখানে বাম ডিভ?

Question

আমি পৃষ্ঠাতে অনুভূমিকভাবে একদল চিত্র প্রদর্শন করতে চাই। প্রতিটি চিত্রের নীচে কয়েকটি লিঙ্ক রয়েছে তাই আমার প্রতিটি চিত্র / লিংক-গ্রুপের চারপাশে একটি ধারক স্থাপন করা দরকার।

আমি যা চাই তার নিকটতমতমটি তাদের ডিভগুলিতে রাখে যা ভাসমান: বামে। সমস্যাটি হ'ল আমি চাই যে পাত্রে কেন্দ্রটি বামদিকে না থাকে ign আমি কীভাবে এটি অর্জন করতে পারি।

Answer 1

display:inline-block;ভাসা পরিবর্তে ব্যবহার করুন

আপনি ভাসমান কেন্দ্রকে কেন্দ্র করতে পারবেন না, তবে ইনলাইন-ব্লকগুলি কেন্দ্রগুলি যেমন এটি পাঠ্য ছিল তাই আপনার "সারি" এর বাইরের সামগ্রিক ধারকটিতে - আপনি text-align: center;প্রতিটি চিত্র / ক্যাপশন ধারক (এটি হবে যা হবে inline-block;) এর জন্য সেট করতে পারবেন আপনি আবার যদি আপনার প্রয়োজন হয় তবে টেক্সটটি বামে সাইন ইন করুন

Comments

যে কোনও উপাদান উপাদানগুলির মধ্যে উপস্থিত স্পেসগুলির সাথে লড়াই করছে, আপনার কোডগুলিতে '<img> </img> <img> </img>' বা '<img> < / img> <! - মন্তব্য -> <img> </img> '।

— মার্টেন

বা মূল উপাদান সেট করুন font-size:0এবং এটি সন্তানের উপর পুনরুদ্ধার করুন। বা letter-spacing:-.31emপিতামাতার এবং letter-spacing:0সন্তানের উপর ব্যবহার করুন ।

— মাইক কৌজার

@ বাউমারের পরিবর্তে ফ্লেক্সবক্স ব্যবহার করুন। নীচে একটি উদাহরণ আছে ।

— জান ডার্ক

vertical-align:middleব্যবহার করার সময় আপনার যোগ করার প্রয়োজন হতে পারে display:inline-block।

— ইবসেনভ 24'15

Answer 2

সিএসএস ফ্লেক্সবাক্স এই দিনগুলিতে ভালভাবে সমর্থিত । ফ্লেক্সবক্সে একটি ভাল টিউটোরিয়াল জন্য এখানে যান ।

এটি সমস্ত নতুন ব্রাউজারগুলিতে দুর্দান্ত কাজ করে:

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

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

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

Comments

এটি অনুভূমিকভাবে কেন্দ্রীকরণের জন্য কাজ করে। পাশাপাশি উল্লম্ব কেন্দ্রীকরণ সম্পর্কে?

— কুলুব

উল্লম্বভাবে কেন্দ্রের জন্য ধারকটিকে একটি উচ্চতা দিন (যেমন উচ্চতা: 500px;) এবং প্রান্তিককরণ যুক্ত করুন: কেন্দ্র;

— জান ডার্ক

Answer 3

এটির মতো চেষ্টা করুন:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

Answer 4

কেবল একটিতে ভাসমান উপাদানগুলিকে মোড়ানো <div>এবং এই সিএসএস দিন:

.wrapper {

display: table;
margin: auto;

}

Answer 5

সম্ভবত এটি আপনি যা খুঁজছেন - https://www.w3schools.com/css/css3_flexbox.asp

সিএসএস:

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

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

এইচটিএমএল:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>

Answer 6

.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}