मैं फ्लोटेड तत्वों को कैसे केंद्र करूं?

Question

मैं पेजिनेशन लागू कर रहा हूं, और इसे केंद्रित करने की जरूरत है। समस्या यह है कि लिंक को ब्लॉक के रूप में प्रदर्शित करने की आवश्यकता है, इसलिए उन्हें फ्लोट करने की आवश्यकता है। लेकिन फिर, 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 -->

विचार प्राप्त करने के लिए, मुझे क्या चाहिए:

Comments

फ्लोट संपत्ति का पूरा उद्देश्य एक तत्व को उसके कंटेनर के बाईं या दाईं ओर स्थित करना है।

— रोब

@ रब: ठीक है, मुझे लिंक तत्वों के लिए चौड़ाई और ऊंचाई को परिभाषित करने की आवश्यकता थी, जो केवल ब्लॉक तत्वों पर किया जा सकता है, लेकिन जब आप लिंक ब्लॉक बनाते हैं, तो वे नई पंक्ति में फैलते हैं, यही कारण है कि मैंने उन्हें फ्लोट किया।

— माइक

वैकल्पिक समाधान, जब आप इनलाइन-ब्लॉक का उपयोग नहीं कर सकते / कर सकते हैं। stackoverflow.com/questions/1232096/…

— hakunin

मेरा मानना ​​है कि यह प्रश्न मध्यस्थ के ध्यान का हकदार है क्योंकि इसका वर्तमान शीर्षक और उत्तर भ्रामक हैं। सवाल केंद्र में चल रही सामग्री के बारे में नहीं है, बल्कि सामग्री को केंद्रित करने के बारे में है। फ्लोटिंग का मतलब है कि गैर-फ्लोटिंग सिबलिंग सामग्री को शेष अंतराल को भरना चाहिए और यह स्पष्ट रूप से न तो वांछित है और न ही यहां हासिल किया गया है।

— ताओ

@AndreiGheorghiu यदि आपको लगता है कि, mods के लिए इसे फ़्लैग करने के बजाय एक संपादन का सुझाव दें। कोई भी इन प्रश्नों को संपादित कर सकता है, इसलिए प्रश्न को संपादित करें और संपादन कारण में एक विस्तृत विवरण लिखें। यह कुछ ऐसा है जो कोई भी उपयोगकर्ता कर सकता है, उसे कोई मध्यस्थ नहीं होना चाहिए। प्रश्न या किसी भी उत्तर के साथ कुछ भी गलत नहीं है जिसमें मध्यस्थ के हस्तक्षेप की आवश्यकता है

— ज़ोए

Answer 1

floatS को हटाना , और उपयोग 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);
 }

(शुरू होने वाली लाइनों को हटा दें और शुरू होने वाली लाइनों को -जोड़ दें +।)

.pagination {
  text-align: center;
}
.pagination a {
  + display: inline-block;
  width: 30px;
  height: 30px;
  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 -->

inline-block जब तक तत्व मूल रूप से एक इनलाइन तत्व है, तब तक IE6 पर भी क्रॉस-ब्राउज़र काम करता है।

Quirksmode से उद्धरण :

इनलाइन ब्लॉक को इनलाइन रखा जाता है (अर्थात आसन्न सामग्री के समान लाइन पर), लेकिन यह ब्लॉक के रूप में व्यवहार करता है।

यह अक्सर प्रभावी ढंग से तैरने की जगह ले सकता है:

इस मूल्य का वास्तविक उपयोग तब होता है जब आप एक इनलाइन तत्व को एक चौड़ाई देना चाहते हैं। कुछ परिस्थितियों में कुछ ब्राउज़र वास्तविक इनलाइन तत्व पर एक चौड़ाई की अनुमति नहीं देते हैं, लेकिन यदि आप प्रदर्शन करने के लिए स्विच करते हैं: इनलाइन-ब्लॉक आपको चौड़ाई सेट करने की अनुमति देता है। " ( http://www.quirksmode.org/css/display.html#inlineblock )।

से W3C कल्पना :

[इनलाइन-ब्लॉक] एक इनलाइन-स्तरीय ब्लॉक कंटेनर उत्पन्न करने के लिए एक तत्व का कारण बनता है। एक इनलाइन-ब्लॉक के अंदर एक ब्लॉक बॉक्स के रूप में स्वरूपित किया जाता है, और तत्व स्वयं एक परमाणु इनलाइन-स्तरीय बॉक्स के रूप में स्वरूपित होता है।

Comments

युक्ति: ऊर्ध्वाधर-संरेखण के बारे में मत भूलना।

— Synexis

हां, यह उन कुछ मामलों में से एक है जहां मैंने पाया है कि ऊर्ध्वाधर-संरेखित वास्तव में वही करता है जो आप इसकी अपेक्षा करते हैं।

— माइक टरली

इस पद्धति का नकारात्मक पक्ष यह है कि क्षैतिज रिक्ति को नियंत्रित करना कठिन है, क्योंकि व्हाट्सएप तत्वों के बीच दिखाई दे सकता है।

— जेवियर पोइनास

@XavierPoinas: फ़ॉन्ट-आकार का उपयोग करें: 0; उस समस्या को ठीक करने के लिए जनक पर

— roelleor

हालांकि ध्यान रखें कि "फ़ॉन्ट-आकार: 0" एंड्रॉइड डिवाइस पर काम नहीं करता था। यकीन नहीं तो हाल के संस्करणों के लिए यह अभी भी सच है।

— एंड्रियास बॉमगार्ट

Answer 2

कई सालों के बाद मैं एक पुरानी चाल का उपयोग करता हूं जो मैंने कुछ ब्लॉग में सीखा है, मुझे खेद है कि मुझे उसे क्रेडिट देने के लिए नाम याद नहीं है।

वैसे भी तैरने वाले तत्वों को केंद्र में रखने के लिए यह काम करना चाहिए:

आपको इस तरह की संरचना की आवश्यकता है:

    .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% दोनों कंटेनरों पर छोड़ दिया।

अच्छी बात यह है कि यह क्रॉस ब्राउज़र है और इसे IE7 + से काम करना चाहिए।

Comments

एक अनुस्मारक जो यह काम करता है यदि केवल 1 एकल फ्लोट तत्व है।

— Wtower

इसके साथ समस्या एक क्षैतिज स्क्रॉल बार दिखाई देगी क्योंकि बाहरी div स्क्रीन के पिछले हिस्से तक फैली हुई है। इसके अलावा जब सूची दूसरी पंक्ति में जाती है तो पूरी चीज बाईं ओर संरेखित हो जाती है।

— cleversprocket

कंटेनर की अधिकतम चौड़ाई निर्धारित किए बिना इससे कोई फर्क नहीं पड़ेगा, margin: 0 auto;इस मामले में बेहतर काम करता है

— मुराफ सूसली

मेरे लिए, और float: left;पर आवश्यक नहीं था । .main-container.fixer-container

— csum

@ cleversprocket मैंने एक ही div में सब कुछ लपेटकर क्षैतिज स्क्रॉल को हल कियाoverflow: hidden;

— csum

Answer 3

फ्लोटिंग केंद्रित करना आसान है । कंटेनर के लिए शैली का उपयोग करें:

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

अस्थायी तत्वों के लिए मार्जिन बदलें:

.pagination a{ margin: 0 2px; }

या

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

और बाकी को वैसे ही छोड़ दें।

मेन्यू या पेजिनेशन जैसी चीजों को प्रदर्शित करना मेरे लिए सबसे अच्छा उपाय है।

ताकत:

• किसी भी तत्व (ब्लॉक, सूची-आइटम आदि) के लिए क्रॉस-ब्राउज़र

• सादगी

कमजोरियों:

• यह तभी काम करता है जब सभी फ्लोटिंग तत्व एक लाइन में होते हैं (जो आमतौर पर मेनू के लिए ठीक है लेकिन गैलरी के लिए नहीं)।

@ arnaud576875 इनलाइन-ब्लॉक एलिमेंट्स का उपयोग इस मामले में बढ़िया (क्रॉस-ब्राउज़र) काम करेगा क्योंकि पेजिनेशन में सिर्फ एंकर (इनलाइन), कोई सूची-आइटम या divs शामिल नहीं हैं:

ताकत:

• बहुस्तरीय वस्तुओं के लिए काम करता है।

Weknesses:

• इनलाइन-ब्लॉक तत्वों के बीच अंतराल - यह शब्दों के बीच अंतरिक्ष के समान काम करता है। यह कंटेनर की चौड़ाई और स्टाइल मार्जिन की गणना में कुछ परेशानियों का कारण हो सकता है। अंतराल की चौड़ाई स्थिर नहीं है, लेकिन यह ब्राउज़र विशिष्ट (4-5px) है। इस अंतराल से छुटकारा पाने के लिए मैं arnaud576875 कोड (पूरी तरह से परीक्षण नहीं) जोड़ूंगा:

  .Pagination {शब्द-रिक्ति: -1em; }

  .pagination a {शब्द-रिक्ति: .1em; }

• यह IE6 / 7 ब्लॉक और सूची-आइटम तत्वों पर काम नहीं करेगा

Comments

प्रदर्शन: टेबल ट्रिक अविश्वसनीय है बस कुछ ही लाइनों के साथ सब कुछ किया जाना चाहिए। मुझे वह याद रखने की जरूरत है। चीयर्स

— किलो

इनलाइन-ब्लॉक तकनीक बहुत अच्छी तरह से काम करती है। सौभाग्य से, मैं जिन तत्वों (नेस्टेड डिव तत्वों) का उपयोग कर रहा हूं, वे इस अंतर से अच्छी तरह से निपट सकते हैं।

— करोलस

आप फ़ॉन्ट आकार को शून्य पर छोड़ कर इनलाइन-ब्लॉक अंतराल को भी हटा सकते हैं, फिर बाल तत्वों के अंदर अपने पिछले मूल्य को बहाल कर सकते हैं

— माइक कॉसर

Answer 4

अपना कंटेनर सेट करें width( pxऔर जोड़ें:

margin: 0 auto;

संदर्भ ।

Comments

मेरे लिए, यह सबसे अच्छा जवाब है: पी।

— alansiqueira27

यह केवल तभी काम करेगा जब कंटेनर की चौड़ाई उपयुक्त होगी, जो कि समस्या है जब इसमें फ्लोटेड तत्व होते हैं।

— वेटावर

Answer 5

फ्लेक्स का उपयोग करना

.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 -->

Answer 6

मुझे लगता है कि 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

Comments

बस मार्जिन के साथ काम करता है: ऑटो; इनकी जगह लेफ्टिअल लेफ्ट और राइट प्रॉपर्टीज भी।

— cellepo

Answer 7

text-align: center;
float: none;

Answer 8

IE7 पता नहीं है inline-block। आपको जोड़ना होगा:

display:inline;
zoom: 1;

Answer 9

इसे आप स्टाइल में जोड़ें

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

* यदि आपके कंटेनर की चौड़ाई ५० पीएक्स २५ पीएक्स २५ पीएम है, अगर वह १० मी ० ५ एमएम डालें।

Answer 10

आप .pagination"टेक्स्ट-संरेखित: केंद्र" की जगह लेफ्ट, ट्रांसफ़ॉर्म और स्थिति के आधार पर लेफ्ट, ट्रांसफ़ॉर्म की दो से तीन पंक्तियों के साथ बदलकर भी ऐसा कर सकते हैं ।

.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 -->

Answer 11

<!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

दो या अधिक div की आप चाहते हैं और उन्हें प्रत्येक के लिए 100px की तरह एक निश्चित चौड़ाई दे तो इसे बाईं या दाईं ओर फ़्लोट करें

चरण 2

फिर इन दो डिवो को एक और डिव में ताना और इसे 200px की चौड़ाई दें। इस div पर मार्जिन ऑटो लागू करें। बूम यह बहुत अच्छी तरह से काम करता है। उपरोक्त उदाहरण की जाँच करें।

Answer 12

बस जोड़ रहे हैं

left:15%; 

के मेरे सीएसएस मेनू में

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

केंद्रित चाल भी किया

Comments

15% सादा मनमाना है।

— Wtower