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

354

আমি পৃষ্ঠাগুলি প্রয়োগ করছি এবং এটি কেন্দ্রিক হওয়া দরকার। সমস্যাটি হ'ল লিঙ্কগুলি ব্লক হিসাবে প্রদর্শিত হওয়া দরকার, তাই সেগুলি ভাসমান হওয়া দরকার। কিন্তু তারপর, text-align: center;তাদের উপর কাজ করে না। বামের মোড়ক ডিভি প্যাডিং দিয়ে আমি এটি অর্জন করতে পারলাম, তবে প্রতিটি পৃষ্ঠায় আলাদা আলাদা পৃষ্ঠা থাকবে, যাতে এটি কাজ করবে না। আমার কোডটি এখানে:

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
স্নিপেট প্রসারিত করুন

ধারণাটি পেতে, আমি কী চাই:

বিকল্প পাঠ

css-float  center  css 
— মাইক
সূত্র
ভাসা সম্পত্তির পুরো উদ্দেশ্যটি তার ধারকটির বাম বা ডানদিকে একটি উপাদান রাখা।
— রব
3
@ রব: আচ্ছা, আমার লিঙ্ক উপাদানগুলির প্রশস্ততা এবং উচ্চতা নির্ধারণ করা দরকার, যা কেবলমাত্র ব্লক উপাদানগুলিতে করা যেতে পারে, তবে আপনি যখন লিঙ্কগুলি ব্লক করেন, তখন তারা প্রতিটি নতুন লাইনে ছড়িয়ে যায়, এজন্যই আমি এগুলিকে ভাসিয়ে দিয়েছি।
— মাইক
বিকল্প সমাধান, যখন আপনি / ইনলাইন-ব্লক ব্যবহার করতে পারবেন না। stackoverflow.com/questions/1232096/...
— hakunin
1
আমি বিশ্বাস করি যে এটির বর্তমান শিরোনাম এবং উত্তরগুলি বিভ্রান্তিকর হওয়ায় এই প্রশ্নটি মডারেটরের মনোযোগের দাবি রাখে। প্রশ্নটি কেন্দ্রের ভাসমান সামগ্রী সম্পর্কে নয়, তবে বিষয়বস্তু কেন্দ্রিক করার বিষয়ে। ভাসমান মানে অ-ভাসমান ভাইবোন সামগ্রীটি বাকী শূন্যস্থান পূরণ করতে পারে এবং এটি এখানে স্পষ্টতই কাঙ্ক্ষিত বা অর্জন করা যায় নি।
— তাও
8
@ আন্দ্রেইগিওরঘিউ যদি আপনি মনে করেন, এটি মোডের জন্য পতাকাঙ্কিত করার পরিবর্তে একটি সম্পাদনার পরামর্শ দিন। যে কেউ এই প্রশ্নগুলি সম্পাদনা করতে পারে, সুতরাং প্রশ্নটি সম্পাদনা করতে পারেন এবং সম্পাদনার কারণে একটি বিশদ ব্যাখ্যা লিখতে পারেন। এটি কোনও ব্যবহারকারী যেভাবে কিছু করতে পারে এটি মডারেটর হতে হবে না। প্রশ্ন বা উত্তরগুলির মধ্যবর্তী ব্যবস্থার হস্তক্ষেপের দরকার নেই
— জো

উত্তর:

406

floatগুলি সরানো এবং ব্যবহার করা inline-blockআপনার সমস্যার সমাধান করতে পারে:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(শুরু হওয়া লাইনগুলি সরিয়ে ফেলুন এবং এর সাথে -শুরু হওয়া লাইনগুলি যুক্ত করুন +))

কোড স্নিপেট দেখান

inline-block উপাদানটি মূলত একটি ইনলাইন উপাদান ততক্ষণ আই 6 এ এমনকি ক্রস ব্রাউজারে কাজ করে।

Quirksmode থেকে উদ্ধৃতি :

একটি ইনলাইন ব্লকটি ইনলাইন (যেমন সংলগ্ন সামগ্রী হিসাবে একই লাইনে) স্থাপন করা হয়েছে, তবে এটি একটি ব্লক হিসাবে আচরণ করে।

এটি প্রায়শই কার্যকরভাবে ফ্লোটগুলি প্রতিস্থাপন করতে পারে:

এই মানটির আসল ব্যবহার হ'ল আপনি যখন কোনও ইনলাইন উপাদানকে একটি প্রস্থ দিতে চান। কিছু পরিস্থিতিতে কিছু ব্রাউজার প্রকৃত ইনলাইন উপাদানটিতে প্রস্থের অনুমতি দেয় না, তবে আপনি যদি প্রদর্শন করতে যান: ইনলাইন-ব্লক আপনাকে প্রস্থ সেট করার অনুমতি দেওয়া হয়। " ( http://www.quirksmode.org/css/display.html#inline block )।

থেকে W3C এর বৈশিষ্ট :

[ইনলাইন-ব্লক] এর ফলে একটি উপাদান একটি ইনলাইন-স্তরের ব্লক ধারক তৈরি করে। একটি ইনলাইন-ব্লকের অভ্যন্তরটি একটি ব্লক বাক্স হিসাবে ফর্ম্যাট করা হয় এবং উপাদানটি নিজেই একটি পারমাণবিক ইনলাইন-স্তরের বাক্স হিসাবে ফর্ম্যাট হয়।

— আরনাড লে ব্ল্যাঙ্ক
সূত্র
10
টিপ: উল্লম্ব-সারিবদ্ধ সম্পর্কে ভুলবেন না।
— সংশ্লেষণ
5
হ্যাঁ, আমি খুঁজে পেয়েছি এমন কয়েকটি ক্ষেত্রে এর মধ্যে একটি যেখানে উল্লম্ব-সারিবদ্ধ আসলে আপনি যা প্রত্যাশা করেছিলেন তা করে।
— মাইক টারলি
4
এই পদ্ধতির ক্ষতিটি হ'ল অনুভূমিক ব্যবধানকে নিয়ন্ত্রণ করা শক্ত, কারণ উপাদানগুলির মধ্যে শ্বেত স্পেস দেখা দিতে পারে।
— জাভিয়ের পইনাস 15
@ জাভিয়ারপুইনাস: হরফ-আকার ব্যবহার করুন: 0; সেই সমস্যাটি সমাধান করতে পিতামাতাকে
— রোয়েলর
মনে রাখবেন যে "ফন্ট-আকার: 0" অ্যান্ড্রয়েড ডিভাইসে কাজ করতে ব্যবহৃত হয়নি। সাম্প্রতিক সংস্করণগুলির জন্য এটি এখনও সত্য কিনা নিশ্চিত না।
— আন্দ্রেস বামগার্ট
150

বেশ কয়েক বছর যাবত আমি কোনও ব্লগে শিখেছি একটি পুরানো কৌশল ব্যবহার করি, দুঃখিত আমি তার ক্রেডিট দেওয়ার জন্য নামটি মনে করি না।

যাইহোক ভাসমান উপাদানগুলির কেন্দ্রে এই কাজ করা উচিত:

আপনার এই জাতীয় কাঠামো দরকার:

    .main-container {
      float: left;
      position: relative;
      left: 50%;
    }
    .fixer-container {
      float: left;
      position: relative;
      left: -50%;
    }
<div class="main-container">
  <div class="fixer-container">
    <ul class="list-of-floating-elements">

      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>

    </ul>
  </div>
</div>
স্নিপেট প্রসারিত করুন

কৌতুকটি কন্টেন্টের উপর নির্ভর করে পাত্রে প্রস্থ পরিবর্তন করতে ফ্লোট বাম দিচ্ছে। তুলনায় অবস্থানের বিষয়: আপেক্ষিক এবং দুটি পাত্রে 50% এবং -50% রেখে গেছে।

ভাল জিনিসটি হ'ল এটি ক্রস ব্রাউজার এবং এটি আই 7 + থেকে কাজ করা উচিত।

— lukart
সূত্র
1
কেবলমাত্র 1 টি একক ভাসমান উপাদান থাকলে এটি কাজ করে।
— ওয়াটওয়ার
এটির সাথে সমস্যাটি একটি অনুভূমিক স্ক্রোল বারটি উপস্থিত হবে কারণ বাইরের ডিভটি স্ক্রিনের অতীতকে প্রসারিত করে। এছাড়াও তালিকাটি যখন অন্য লাইনে আবৃত হয় তখন পুরো জিনিসটি বাম প্রান্তরে যায়।
— ক্লিভারপ্রকেট
কনটেইনার সর্বাধিক প্রস্থ নির্ধারণ ছাড়া এটি margin: 0 auto;কোনও
— তাত্পর্যপূর্ণ
1
আমার float: left;জন্য, উপর .main-containerএবং প্রয়োজনীয় ছিল না .fixer-container।
— সিসম
@ সাইভারসপ্রকেট আমি একক overflow: hidden;
— ডিভিতে
36

ভাসমান কেন্দ্রীভূত করা সহজ । ধারকটির জন্য কেবল শৈলীটি ব্যবহার করুন:

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

ভাসমান উপাদানগুলির জন্য মার্জিন পরিবর্তন করুন:

.pagination a{ margin: 0 2px; }

অথবা

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }

এবং বাকিটি যেমন আছে তেমন ছেড়ে দিন।

মেনু বা পৃষ্ঠাগুলির মতো জিনিসগুলি প্রদর্শন করা আমার পক্ষে সেরা সমাধান।

শক্তি:

  • যে কোনও উপাদানগুলির জন্য ক্রস ব্রাউজার (ব্লক, তালিকা-আইটেম ইত্যাদি)

  • সরলতা

দুর্বলতা:

  • এটি তখনই কার্যকর হয় যখন সমস্ত ভাসমান উপাদানগুলি এক লাইনে থাকে (যা সাধারণত মেনুগুলির জন্য ঠিক তবে গ্যালারীগুলির জন্য নয়)।

@ arnaud576875 এই ক্ষেত্রে ইনলাইন-ব্লক উপাদান ব্যবহার করে দুর্দান্ত (ক্রস ব্রাউজার) কাজ করবে কারণ পৃষ্ঠা - রচনায় কেবল অ্যাঙ্কর (ইনলাইন) থাকে না, কোনও তালিকা-আইটেম বা ডিভিড থাকে না:

শক্তি:

  • মাল্টলাইন আইটেমের জন্য কাজ করে।

Weknesses:

  • ইনলাইন-ব্লক উপাদানগুলির মধ্যে ফাঁক - এটি শব্দের মধ্যে একটি স্থানের মতোই কাজ করে। এটি ধারকটির প্রস্থ এবং স্টাইলিংয়ের মার্জিন গণনা করে কিছু ঝামেলা সৃষ্টি করতে পারে। গ্যাপগুলির প্রস্থ স্থির নয় তবে এটি ব্রাউজার নির্দিষ্ট (4-5px)। এই ফাঁকগুলি থেকে মুক্তি পেতে আমি arnaud576875 কোডে যুক্ত করব (পুরোপুরি পরীক্ষিত নয়):

    .pageration {শব্দ-ব্যবধান: -1 এমএম; }

    .pageration a {শব্দ-ব্যবধান: .১ ম; }

  • এটি ব্লক এবং তালিকা-আইটেম উপাদানগুলিতে আই 6/7 এ কাজ করবে না

— romprzy
সূত্র
প্রদর্শন: টেবিল ট্রিক অবিশ্বাস্য মাত্র কিছু লাইন দিয়ে সবকিছু করা উচিত। আমার এটা মনে রাখা দরকার চিয়ার্স
— কিলোপ
ইনলাইন-ব্লক কৌশল অত্যন্ত ভাল কাজ করে। ভাগ্যক্রমে, আমি যে উপাদানগুলির জন্য (নেস্টেড ডিভ উপাদানগুলি) ব্যবহার করছি এটি ফাঁকগুলি ভালভাবে মোকাবেলা করতে পারে।
— করোলাস
আপনি ফন্টের আকার শূন্যে রেখে ইনলাইন-ব্লক ফাঁকগুলিও সরাতে পারবেন, তারপরে সন্তানের উপাদানগুলির মধ্যে আপনার পূর্বের মানটি পুনরুদ্ধার করতে পারেন
— মাইক কৌজার
15

আপনার ধারক এর সেট widthমধ্যে pxএবং যোগ করুন:

margin: 0 auto;

রেফারেন্স ।

— AMB
সূত্র
1
আমার জন্য, এটি সেরা উত্তর: পি।
— অ্যালানসিকিরা 27
3
এটি কেবল তখনই কাজ করবে যখন ধারকের প্রস্থ যথাযথ হয়, যা এতে ভাসমান উপাদান থাকা অবস্থায় সমস্যা।
— ওয়াটওয়ার
11

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

.pagination {
  text-align: center;
  display:flex;
  justify-content:center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
স্নিপেট প্রসারিত করুন

— সন্তোষ খলসে
সূত্র
5

আমি মনে করি এর marginপরিবর্তে সবচেয়ে ভাল উপায়টি ব্যবহার করা হচ্ছে display।

অর্থাৎ,

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

ফলাফল এবং কোড পরীক্ষা করুন:

http://cssdeck.com/labs/d9d6ydif

— Tarod
সূত্র
1
শুধু মার্জিন দিয়ে কাজ করে: অটো; পরিবর্তে স্বতন্ত্র বাম এবং ডান বৈশিষ্ট্য।
— cellepo
1

আপনার স্টাইলিং এ এটি যোগ করুন

position:relative;
float: left;
left: calc(50% - *half your container length here);

* যদি আপনার ধারকটির প্রস্থ 50px হয় 25px লাগান, যদি এটি 10 ​​মিমি হয় 5 ম হয়।

— 11
সূত্র
1

.paginationবাম, রূপান্তর এবং পরিস্থিতি, অবস্থানের উপর নির্ভর করে দুই থেকে তিন লাইনের CSS এর পরিবর্তে "পাঠ্য-প্রান্তিককরণ: কেন্দ্র" প্রতিস্থাপন করে আপনি এটিও করতে পারেন ।

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
স্নিপেট প্রসারিত করুন

— mwag
সূত্র
0 
<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

ধাপ 1

আপনি চান দুটি বা ততোধিক ডিভ তৈরি করুন এবং তাদের প্রতিটি জন্য 100px এর মতো একটি নির্দিষ্ট প্রস্থ দিন তারপরে এটি বাম বা ডানদিকে ভাসাবেন

ধাপ ২

তারপরে এই দুটি ডিভিকে অন্য ডিভের সাথে রেপ করুন এবং এটিকে 200px প্রস্থ দিন। এই বিভাগে মার্জিন অটো প্রয়োগ করুন। বুম এটি বেশ ভাল কাজ করে। উপরের উদাহরণটি পরীক্ষা করুন।

— নোল জোস
সূত্র
-1

শুধু যোগ করা হচ্ছে

left:15%;

আমার সিএসএস মেনুতে 

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

কেন্দ্রীক কৌতুক খুব

— user3085662
সূত্র
4
15% সাধারণ স্বেচ্ছাসেবী।
— ওয়াটওয়ার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.