"स्थिति: निरपेक्ष" तत्व को कैसे केंद्र में रखा जाए

677

मुझे उस तत्व को केंद्रित करने में समस्या हो रही है जिसमें विशेषता positionसेट है absolute। क्या किसी को पता है कि छवियां केंद्रित क्यों नहीं हैं?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>
स्निपेट का विस्तार करें

html  css  css-position  centering 
— user1098278
स्रोत
3
आपको ul # स्लाइड शो को एक निश्चित चौड़ाई देने की आवश्यकता है ...
— ptriek

जवाबों:

1192

यदि आपने एक चौड़ाई निर्धारित की है जिसका आप उपयोग कर सकते हैं:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
— baaroz
स्रोत
21
यह बाकियों की तुलना में बहुत अधिक स्वच्छ उत्तर है! क्या कोई कैविएट हैं?
— sbichenko
8
सबसे अच्छा जवाब। मैंने अभी इसकी जाँच की है और यह सभी ब्राउज़रों पर काम करता है। यह IE8 पर काम नहीं करता है, लेकिन यह IE> = 9 पर काम करता है
— रोजर
13
IE में परीक्षण करना सुनिश्चित करें, यह चाल काम नहीं करती है यदि तत्व का IE9 में 'अधिकतम-चौड़ाई' सेट है
— aphax
33
मैं व्यक्तिगत रूप से वाक्यविन्यास को पसंद करता हूं "मार्जिन: 0 ऑटो; बाएं: 0; दाएं: 0;"
— हेक्टर ऑर्डोनेज़
58
यह काफी सरलता से काम नहीं करता है, जब तक कि एक चौड़ाई निर्धारित न हो। यदि आपके पास पाठ-संरेखित है: माता-पिता पर केंद्र और पूर्ण-स्थित तत्व पर पृष्ठभूमि नहीं है, तो यह काम करने के लिए APPEAR हो सकता है, लेकिन इस पर एक पृष्ठभूमि डालें और आप देखेंगे कि यह वास्तव में पूरी चौड़ाई ले रहा है। TranslateX (-50%) उत्तर सही है।
— कोडमेकिन
584

पद 1 के तत्व को जाने बिना width/ , इसे अभी भी संरेखित करना संभव है:height

यहाँ उदाहरण दें

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

यह ध्यान देने योग्य है कि CSS ट्रांसफ़ॉर्म IE9 और इसके बाद के संस्करण में समर्थित है । (संक्षिप्तता के लिए लोप किए गए विक्रेता उपसर्ग)

व्याख्या

जोड़ने top/ leftके 50%माता-पिता के बीच, और करने के लिए तत्व के शीर्ष / छोड़ दिया मार्जिन में बढ़त चाल translate()के साथ समारोह (नकारात्मक) का मूल्य-50% चाल उसके आकार के आधे से तत्व। इसलिए तत्व को मध्य में स्थित किया जाएगा।

इसका कारण यह है कि top/ पर प्रतिशत मानleft गुण मूल तत्व की ऊंचाई / चौड़ाई के सापेक्ष है (जो एक ब्लॉक बना रहा है)।

जबकि ट्रांसफ़ॉर्म फ़ंक्शन पर प्रतिशत मान तत्व की चौड़ाई / ऊँचाई के सापेक्ष है (वास्तव में यह बाउंडिंग बॉक्स के आकार को संदर्भित करता है ) ।translate()

यूनिडायरेक्शनल अलाइनमेंट के लिए, साथ translateX(-50%)या translateY(-50%)इसके बजाय जाएं।

1. positionअन्य के साथ एक तत्व static। यानी relative, absolute, fixedमान।

— हशेम क़ोलमी
स्रोत
65
यह शीर्ष उत्तर होना चाहिए !!
— क्रिस पाइन
3
बहुत खुबस! बहुत-बहुत शुभकामनाएँ!
— भार्गव पोन्नपल्ली
4
मैंने इसका उत्तर और अच्छी व्याख्या के लिए हर जगह खोज की है। यह वहाँ सबसे अच्छा जवाब है और एक महान स्पष्टीकरण भी है! धन्यवाद।
— माइक
5
क्षैतिज केंद्रित:, position: absolute; left: 50%; transform: translateX(-50%);ऊर्ध्वाधर केंद्रित position: absolute; top: 50%; transform: translateY(-50%);:।
— Константин Ван
1
अभी-अभी मैंने पाया कि translateसंपत्ति, तत्व का स्वयं के आकार से अनुवाद करती है , उसके माता-पिता का कोई फर्क नहीं पड़ता।
— फ़रज़िन कांजी
185

absoluteसीएसएस में कुछ बोल केंद्रित करने के बजाय सीएसएस में सजाया गया है।

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

margin-leftजिस तत्व को आप केंद्र में लाने का प्रयास कर रहे हैं उसकी आधी चौड़ाई (नकारात्मक) में बदलें ।

— bookcasey
स्रोत
5
यह परीक्षण करते समय यह काम नहीं करता है जब चित्र अलग-अलग आकार के होते हैं, और वे अभी भी एक दूसरे
— रयान गिबन्स
3
बहुत हैक-ईश (जैसा कि यह लगभग हमेशा सीएसएस के साथ निकलता है)। लेकिन कमाल! :-)
— डॉ। कैमेलन
1
मुझे कुछ अन्य उत्तरों की चतुराई से लुभाया गया, लेकिन केवल यह ही मेरे लिए विश्वसनीय था।
— क्रिस शिफहोर
मेरे पास रयान जैसा ही मुद्दा था, इसलिए मैंने "बैरोज़" द्वारा सुझाए गए दूसरे उत्तर की कोशिश की और यह मेरे लिए काम कर गया !!! और यह विभिन्न प्रस्तावों का भी समर्थन करता है, क्योंकि मेरे मुख्य DIV की चौड़ाई% में है और पीएक्स नहीं है
— UID
यह वास्तव में केंद्रित नहीं है। यह और अधिक सही करने के लिए रखा जाता है
— Artsicle
82

लंबवत और क्षैतिज रूप से संरेखित केंद्र को विभाजित करें 

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

नोट: तत्वों को सेट करने के लिए चौड़ाई और ऊंचाई होनी चाहिए

— सेबिन साइमन
स्रोत
1
मुझे नहीं पता कि यह अधिक मतदान क्यों नहीं होता है। जहाँ तक मैं बता सकता हूँ मोबाइल ब्राउज़र सहित सभी ब्राउज़रों में काम करता है। समर्थन के संदर्भ में अधिक विश्वसनीय हैं। यह सरल, आसान और साफ है ...
— डेविड मार्टिंस
1
यह एक बेहतर जवाब है। इसे बनाने के लिए केवल एक div की आवश्यकता होती है और बाएं कॉलिंग की तुलना में अधिक उपयोग के मामले हैं: 50% ;, शीर्ष: 50%; 69+ मतों के साथ हल की तरह
— इयान एस
अब तक का सबसे अच्छा जवाब, यहाँ आने वाले किसी भी व्यक्ति को इसकी जाँच करनी चाहिए!
— एडेल
3
heightकाम करने के लिए तत्व को एक सेट की भी आवश्यकता होती है ।
— अलेक्सबूट्स
55

एक साधारण सीएसएस ट्रिक, बस जोड़ें:

width: 100%;
text-align: center;

यह चित्र और पाठ दोनों पर काम करता है।

— cutez7boyz
स्रोत
48

अगर आप किसी परम तत्व को केंद्र में रखना चाहते हैं

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

यदि आप चाहते हैं कि एक कंटेनर को बाएं से दाएं केंद्रित किया जाए, लेकिन ऊपर से नीचे तक नहीं

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

यदि आप चाहते हैं कि एक कंटेनर ऊपर से नीचे की ओर केंद्रित हो, भले ही दाएं से बाएं हो

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

15 दिसंबर, 2015 तक अद्यतन

खैर मैंने कुछ महीने पहले यह एक और नई चाल सीखी। यह मानते हुए कि आपके पास एक रिश्तेदार मूल तत्व है।

यहाँ आपका पूर्ण तत्व जाता है।

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

इसके साथ, मुझे लगता है कि यह मेरे पुराने समाधान से बेहतर उत्तर है। चूंकि आपको चौड़ाई और ऊंचाई निर्दिष्ट करने की आवश्यकता नहीं है। यह एक यह तत्व की सामग्री को अपनाता है।

— वेस्ले ब्रायन लाचेनल
स्रोत
36

एक "स्थिति: निरपेक्ष" तत्व को केंद्र में रखना।

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
— Vadamadafaka
स्रोत
32

यह मेरे लिए काम किया:

position: absolute;
left: 50%;
transform: translateX(-50%);
— Deplake
स्रोत
27

केंद्र की स्थिति में: पूर्ण विशेषता जिसे आपको बाएं सेट करने की आवश्यकता है: 50% और मार्जिन-बाएं: -50% div की चौड़ाई।

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

वर्टिकल सेंटर एब्सोल्यूट के लिए आपको वही चीज़ करने की ज़रूरत है जो टॉप के साथ बाईं ओर न हो। (नोट: html और शरीर की न्यूनतम ऊंचाई 100% होनी चाहिए;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

और दोनों के लिए जोड़ा जा सकता है

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>
— Rednas
स्रोत
16 
    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

डेमो देखें: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; position: absoluteजोड़ने पर एक तत्व के साथ काम करता हैleft: 0; right: 0;

— मोहम्मद दया
स्रोत
2
कृपया इस कोड के काम करने के पीछे किसी प्रकार की टिप्पणी या तर्क प्रदान करें। कोड उत्तर अनिवार्य रूप से हटाए जाने के लिए चिह्नित किए जाएंगे।
— रेयरेंग
14

सरल, सबसे अच्छा:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

फिर आपको अपने img टैग को एक टैग में डालने की जरूरत है जो खेल की स्थिति: रिश्तेदार संपत्ति, निम्नानुसार है:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>
— स्टीफन डी लुका
स्रोत
8

शायद सबसे छोटा

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
— क्रिस
स्रोत
1
यह काफी भयानक है, लेकिन सिर्फ लंबवत और क्षैतिज रूप से केंद्र के लिए हमें केवल मार्जिन ऑटो बनाने की आवश्यकता है
— संतोष
7

यदि आप उस तत्व की चौड़ाई नहीं जानते हैं जो आप इस कोड का उपयोग कर सकते हैं:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

फिडेल में डेमो: http://jsfiddle.net/wrh7a21r/

स्रोत: https://stackoverflow.com/a/1777282/1136132

— joseantgv
स्रोत
@ NabiK.AZ यह उदाहरण उपयोगी है यदि आप तत्व की चौड़ाई नहीं जानते हैं। अपने उदाहरण में आपने div को एक चौड़ाई निर्धारित की है।
— joseantgv
7

या अब आप पोस्ट निरपेक्ष के साथ फ्लेक्स बॉक्स का उपयोग कर सकते हैं: 

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}
— सेबस्टियन थॉमस
स्रोत
यह बहुत कम आंका गया है।
— घेराबंदी
5

यहाँ छवि विवरण दर्ज करें

मुझे यकीन नहीं है कि आप क्या हासिल करना चाहते हैं, लेकिन इस मामले में सिर्फ width: 100%;आपके लिए जोड़नाul#slideshow li चाल चलेगी।

व्याख्या

imgटैग इनलाइन-ब्लॉक तत्व हैं। इसका मतलब है कि वे पाठ की तरह इनलाइन प्रवाह करते हैं, लेकिन इसमें ब्लॉक तत्वों की तरह चौड़ाई और ऊंचाई भी है। अपने सीएसएस में दो देखते हैं text-align: center;नियमों को लागू किया जाता <body>है और करने के लिए #slideshowWrapper(जो btw अनावश्यक है) यह सब इनलाइन और इनलाइन-ब्लॉक बच्चे तत्वों उनके निकटतम ब्लॉक तत्वों में केंद्रित किया जाना बना देता है, अपने कोड में ये हैं liटैग। सभी ब्लॉक एलिमेंट्स हैंwidth: 100% अगर वे स्थिर प्रवाह ( position: static;) हैं, जो डिफ़ॉल्ट है। समस्या यह है कि जब आप liटैग को होना बताते हैं position: absolute;, तो आप उन्हें सामान्य स्थैतिक प्रवाह से बाहर निकालते हैं, और इससे उनका आकार केवल उनकी आंतरिक सामग्री को फिट करने के लिए सिकुड़ जाता है, दूसरे शब्दों में वे अपनी width: 100%संपत्ति को "खो" देते हैं।

— कॉन्स्टेंटिन कालबाज़ोव
स्रोत
5

left: calc(50% - Wpx/2);W का उपयोग करते हुए तत्व की चौड़ाई मेरे लिए काम करती है।

— Julix
स्रोत
आप डब्ल्यू कैसे निर्धारित करते हैं?
— पर्पलजैकेट
उन्होंने कहा "एक छवि" - आदर्श रूप से वेब के लिए छवियां करते समय आप उस छवि को आकार में बनाने वाले होते हैं जिसका आप उपयोग कर रहे हैं (इसे आकार बदलने के बजाय) अनावश्यक वजन से बचने के लिए (यदि आप एक बड़ी छवि बनाते हैं छोटा) या फ़िज़नेस (यदि आप एक छोटी छवि को बड़ा बनाते हैं)। - यदि आप jQuery का उपयोग कर रहे हैं और फिर गतिशील रूप से शैली का उपयोग कर रहे हैं, तो आप "imageElement.naturalHeight" और "imageElement.naturalWidth" का उपयोग कर सकते हैं, लेकिन यह थोड़ा जटिल है। निष्पक्ष होने के लिए, कई अन्य उत्तरों के लिए आपको उनकी तकनीक के काम करने के लिए छवि की चौड़ाई जानना आवश्यक है।
— जूलिक्स
यदि आप वास्तव में डब्ल्यू प्राप्त करने के तरीके पर स्पष्ट नहीं हैं, तो क्रोम में आप तत्वों पर मंडराने के लिए CTRL + Shift + i (डेवलपर टूल), फिर CTRL + Shift + C (निरीक्षण मोड) का उपयोग कर सकते हैं और देख सकते हैं कि कितनी व्यापक चीजें हैं। आप यह भी तय कर सकते हैं कि आप कितना चौड़ा होना चाहते हैं और अपने सीएसएस में "चौड़ाई: डब्ल्यूपीएक्स" जोड़ें।
— जूलिक्स
4

आपकी छवियां केंद्रित नहीं हैं क्योंकि आपकी सूची आइटम केंद्रित नहीं हैं; केवल उनका पाठ केंद्रित है। आप पूरी सूची को केंद्रित करके या छवियों को सूची के भीतर केंद्रित करके अपनी इच्छित स्थिति प्राप्त कर सकते हैं।

आपके कोड का एक संशोधित संस्करण नीचे पाया जा सकता है। मेरे संशोधन में मैं सूची और उसके भीतर दोनों छवियों को केंद्र में रखता हूं।

सच्चाई यह है कि आप नहीं कर सकते किसी ऐसे तत्व को केंद्र में , जिसकी स्थिति निरपेक्ष हो।

लेकिन इस व्यवहार की नकल की जा सकती है!

नोट: ये निर्देश किसी भी DOM ब्लॉक तत्व के साथ काम करेंगे, न कि केवल img।

  1. अपनी छवि को एक div या अन्य टैग (आपके मामले में ली) के साथ घेरें।

    <div class="absolute-div">
  <img alt="my-image" src="#">
</div>

    नोट: इन तत्वों को दिए गए नाम विशेष नहीं हैं।

  2. Div को पूर्ण स्थिति और आपकी छवि को केंद्रित करने के लिए अपनी css या scss को बदल दें।

    .absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

आखिर तुमने इसे हासिल कर ही लिया है! आपका img केंद्रित होना चाहिए!

तुम्हारा कोड:

इसे आज़माएं:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}
<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>
स्निपेट का विस्तार करें

मुझे आशा है कि यह मददगार था। सौभाग्य!

— D3RPZ1LLA
स्रोत
3

एक रिश्तेदार वस्तु के अंदर एक निरपेक्ष वस्तु अपने माता-पिता के सापेक्ष होती है, यहां समस्या यह है कि आपको कंटेनर के लिए एक स्थिर चौड़ाई की आवश्यकता है #slideshowWrapper, और बाकी समाधान अन्य उपयोगकर्ताओं की तरह है

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

— eveevans
स्रोत
दो छवियों को एक दूसरे के ढेर के रूप में आपकी बेला।
— रेयान गिबन्स
3

यहां "स्थिति: निरपेक्ष" के साथ केंद्र तत्व के लिए आसान और सबसे अच्छा समाधान है 

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 
<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>
स्निपेट का विस्तार करें

— SantoshK
स्रोत
2

आप इस तरह से कोशिश कर सकते हैं:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }
<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>
स्निपेट का विस्तार करें

— चिराग दवे
स्रोत
1

स्थिति निरपेक्ष इसे प्रवाह से बाहर ले जाती है, और इसे 0x0 पर माता-पिता के पास भेज देती है (अंतिम ब्लॉक तत्व की स्थिति पूर्ण या स्थिति सापेक्ष होती है)।

मुझे यकीन नहीं है कि वास्तव में आप क्या हासिल करने की कोशिश कर रहे हैं, यह ली को सेट करने के लिए सबसे अच्छा हो सकता है position:relativeऔर जो उन्हें केंद्रित करेगा। अपने वर्तमान सीएसएस को देखते हुए

इसके साथ खेलने के लिए http://jsfiddle.net/rtgibbons/ejRTU/ देखें

— रेयान गिबन्स
स्रोत
: / अंत में लगभग एक ही समाधान है तुम्हारा ... <ऊपर का वोट
— ईव्यून्स
1 
#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

मुझे याद नहीं है कि मैंने नकारात्मक शीर्ष, दाएं, नीचे, बाएं मानों का उपयोग करके ऊपर सूचीबद्ध केंद्र विधि को कहां देखा था। मेरे लिए, यह तहनिक ज्यादातर स्थितियों में सबसे अच्छा है।

जब मैं ऊपर से संयोजन का उपयोग करता हूं, तो छवि निम्न सेटिंग्स के साथ पृष्ठभूमि-छवि की तरह व्यवहार करती है:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

पहले उदाहरण के बारे में अधिक विवरण यहां पाया जा सकता है:
सीएसएस के साथ एक div के पहलू अनुपात को बनाए रखें

— Marian07
स्रोत
0

जो हो रहा है, लगता है कि दो समाधान हैं; मार्जिन का उपयोग करके केंद्रित और स्थिति का उपयोग करके केंद्रित। दोनों ठीक काम करते हैं, लेकिन अगर आप इस केंद्रित तत्व के सापेक्ष किसी तत्व को पूर्ण स्थिति में लाना चाहते हैं, तो आपको पूर्ण स्थिति विधि का उपयोग करने की आवश्यकता है, क्योंकि दूसरे तत्व की पूर्ण स्थिति पहले माता-पिता के लिए चूक है जो तैनात है। इस तरह:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

जब तक मैं इस पोस्ट को नहीं पढ़ूंगा, मार्जिन का उपयोग करते हुए: 0 ऑटो तकनीक, अपनी सामग्री के बाईं ओर एक मेनू बनाने के लिए मुझे इसे संतुलित करने के लिए दाईं ओर एक समान-चौड़ाई वाला कॉलम बनाना था। सुंदर नहीं। धन्यवाद!

— डीन नेटल्स
स्रोत
-1 

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>
स्निपेट का विस्तार करें

— antelove
स्रोत
1
इस उत्तर में केवल कोड है। हालांकि यह सही हो सकता है, इसमें एक साथ स्पष्टीकरण होना चाहिए कि कोड ओपी के प्रश्न का उत्तर क्यों देता है। स्टैक एक्सनज पर कोड "स्व व्याख्या" नहीं है।
— JBH
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.