सीएसएस: एक <div> तत्व के भीतर केंद्र तत्व

Question

HTML एलिमेंट को सेंट करने के लिए मैं CSS का इस्तेमाल कर सकता हूं left: 50%;। हालांकि, यह संपूर्ण विंडो के संबंध में तत्व को केंद्र में रखता है।

मेरे पास एक तत्व है जो एक तत्व का बच्चा है <div>और मैं इस माता-पिता के सम्मान के साथ बच्चे को केंद्रित करना चाहता हूं <div>, न कि पूरी खिड़की।

मैं कंटेनर नहीं करना चाहती <div>है करने के लिए सभी अपनी सामग्री केंद्रित है, सिर्फ एक विशिष्ट बच्चे।

Answer 1

text-align:center;पैरेंट डिव, और margin:auto;चाइल्ड डिव पर सेट करें ।

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}

<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

यह एक अच्छा संसाधन ज्यादातर कुछ भी केंद्र में है।
http://howtocenterincss.com/

Comments

हम ... मैं पूरे माता-पिता को पाठ केंद्रित नहीं करना चाहता। यद्यपि यह समस्या को हल करता है, यह एक और बनाता है!

— Randomblue

आप पाठ-संरेखित कर सकते हैं: बाएँ; बाल तत्व के लिए, पाठ को सही ढंग से संरेखित करना।

— 22

@pasine text-alignकिसी <i>तत्व पर काम नहीं करता है । देते हुए एक वर्ग करता है ..

— nclsvh

क्या इस केंद्र को तत्व के साथ-साथ क्षैतिज रूप से बनाने का एक तरीका है?

— गमन स्मिथ

@GmanSmith आप इसके लिए display: table-cellया उपयोग कर सकते हैं flexbox। मेरे द्वारा जोड़े गए लिंक पर एक नज़र डालें।

— 22

Answer 2

वास्तव में यह CSS3 फ्लेक्स बॉक्स के साथ बहुत सीधा है ।

.flex-container{
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
  
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <div class="inner-element"></div>
</div>

अपडेट करें:

ऐसा लगता है कि जिस समय मैंने यह उत्तर लिखा था, उस समय मैंने ओपी एडिट नहीं पढ़ा था। उपरोक्त कोड सभी आंतरिक तत्वों (उनके बीच ओवरलैपिंग के बिना) को केंद्र में रखेगा , लेकिन ओपी केवल एक विशिष्ट तत्व को केंद्रित करना चाहता है , अन्य आंतरिक तत्वों को नहीं। तो @Warface जवाब दूसरी विधि अधिक appropiate है, लेकिन यह अभी भी ऊर्ध्वाधर केंद्र की आवश्यकता है:

.flex-container{
  position: relative;
  
  /* Other styling stuff */
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);

  /* Other styling stuff */
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <p>Other inner elements like this follows the normal flow.</p>
  <div class="inner-element"></div>
</div>

Answer 3

सीएसएस

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

एचटीएमएल

<div class="divWrapper">Tada!!</div>

यह div को केन्द्रित करना चाहिए

2016 - एचटीएमएल 5 + CSS3 विधि

सीएसएस

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

एचटीएमएल

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

Comments

लेकिन यह भी पूरे शरीर को केंद्र में रखता है, है ना?

— Randomblue

खैर जो भी divWrapper में होगा वह हां पर केंद्रित होगा, लेकिन आप उस Div के बाहर कुछ रख सकते हैं और अगर आप चाहें तो यह केंद्रित नहीं होगा।

— वॉरफेस

सटीक चौड़ाई (960px) अधिकांश परिदृश्यों के लिए उचित नहीं है।

— क्यूमास्टर

@QMaster मुझे पता है कि यह पोस्ट पुरानी है, मुझे इसे HTML5 पावर के साथ अपडेट करना चाहिए

— Warface

यहाँ एक अच्छी व्याख्या है: w3.org/Style/Examples/007/center.en.html

— पर्पलजेट

Answer 4

text-align:center; माता-पिता को तलाक देना चाहिए

Comments

यह वह पाठ नहीं है जिसे मैं संरेखित करना चाहूंगा, यह संपूर्ण तत्व है (उदाहरण के लिए एक बटन)।

— रैंडमब्लू जुले

यदि यह div में है, तो इसे केंद्र को संरेखित करना चाहिए, ब्लॉक तत्वों के लिए थोड़ा मुश्किल हो सकता है।

— केविन बोवर्सॉक्स

Answer 5

केवल विशिष्ट बच्चे को केन्द्रित करने के लिए:

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}

<div class="parent">
   <span class="child">hi</span>
</div>  

या, आप फ्लेक्स का भी उपयोग कर सकते हैं, लेकिन यह सभी बच्चों को केंद्रित करेगा

.parent {
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: white;  
}

<div class="parent">
   <span class="child">hi</span>
</div>

Answer 6

आप बूटस्ट्रैप फ्लेक्स क्लास नाम का उपयोग कर सकते हैं जैसे:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

कि अंदर तत्वों की संख्या के साथ भी काम करेगा।

Answer 7

क्या div एक निश्चित चौड़ाई या एक द्रव चौड़ाई है? किसी भी तरह से, द्रव चौड़ाई के लिए आप उपयोग कर सकते हैं:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

या आप माता-पिता को text-align:center;और बच्चे को div div सेट कर सकते हैं text-align:left;।

और left:50%;केवल पूरे पृष्ठ के अनुसार इसे तब सेट करता है जब div सेट होता है position:absolute;। यदि आप left:50%;इसे करने के लिए div सेट यह माता पिता div की चौड़ाई के सापेक्ष करना चाहिए। निश्चित चौड़ाई के लिए, यह करें:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

Answer 8

बस माता पिता को दे दो position: relative

Answer 9

यदि आप CSS3 का उपयोग करना चाहते हैं:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

आप अपने तत्व की चौड़ाई को फिट करने के लिए प्रतिशत कैसे प्राप्त करें, यह जानने के लिए आगे की खोज करना चाहते हैं।

Answer 10

सबसे पहले आप इसे बाएं के साथ कर सकते हैं: 50% इसे पेरेंट डिव के सापेक्ष केन्द्रित करना है लेकिन इसके लिए आपको सीएसएस पोजीशन सीखने की आवश्यकता है।

कई से एक संभव समाधान कुछ ऐसा करना है

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

यदि आपका दिवा केंद्र केंद्रित होना है, तो आप बस कर सकते हैं

    .mydiv { position:relative; margin:0 auto; } 

Comments

मैं नहीं चाहता कि पूरे माता-पिता का text-align:center;

— तलाक

तुम क्यों नहीं चाहते? वैसे भी उस स्थिति में आप दूसरे दृष्टिकोण का उपयोग कर सकते हैं।

— एहतेशाम

Answer 11

बायां: 50% स्थैतिक चौड़ाई के साथ निकटतम माता-पिता के लिए सख्ती से काम करता है। चौड़ाई का प्रयास करें: 500px या पैरेंट डिव पर कुछ। वैकल्पिक रूप से, उस सामग्री को बनाएं जिसे आपको प्रदर्शित करने की आवश्यकता है: ऑटो पर बाएं और दाएं मार्जिन को ब्लॉक और सेट करें।

Answer 12

यदि बाल तत्व इनलाइन है (उदाहरण के लिए ए div, tableआदि नहीं) तो मैं इसे एक के अंदर लपेटकर divया pआवरण के पाठ को केंद्र के बराबर सीएसएस गुण संरेखित करूंगा ।

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

अन्यथा, यदि तत्व एक निश्चित चौड़ाई के साथ एक ब्लॉक ( display: blockजैसे, ए divया ए p) है, तो मैं इसके मार्जिन को बाएं और दाएं सीएसएस गुणों को ऑटो पर सेट कर दूंगा।

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

आप निश्चित रूप text-align: centerसे आवरण सामग्री में एक जोड़ सकते हैं ताकि इसकी सामग्री भी केंद्रित हो सके।

मैं स्थिति के साथ परेशान नहीं करूंगा क्योंकि IMHO ओपी समस्या के लिए जाने का रास्ता नहीं है, लेकिन इस लिंक की जांच करना सुनिश्चित करें , बहुत उपयोगी है।

Answer 13

अपने तत्व के केंद्र के लिए एक नया div तत्व बनाएं, फिर उस तत्व को इस तरह केंद्रित करने के लिए विशेष रूप से एक वर्ग जोड़ें

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

सीएसएस

.centered{
    text-align:center;
}

Answer 14

मैंने एक और उपाय खोज लिया है

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

और शरीर में

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

जब भी आपका कंटेनर बड़ा या छोटा होगा, तो यह आपकी सामग्री div को केंद्र में रखेगा। इस स्थिति में आपकी सामग्री 1100% कंटेनर से बड़ी होनी चाहिए, न कि केन्द्रित, लेकिन उस स्थिति में आप कंटेनर से बड़ा कर सकते हैं, और यह काम करेगा

Answer 15

text-align: center;माता-पिता display: inline-block;को और डिव को असाइन करें ।

Answer 16

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

।लेख {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

} ।लेख {

}

/ * लेख के अंदर मैं छवि केंद्रित चाहता हूं * /

.article img {।

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/ * अब एक ही लेख तत्व में इस छवि के तहत एक बटन होना चाहिए जैसे कि अधिक पढ़ें बेशक आपको em या% के साथ काम करने की आवश्यकता होती है जब इसके एक उत्तरदायी डिजाइन के अंदर * /

.लेकिन {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

सौभाग्य

Answer 17

यदि आप एक div के अंदर तत्वों को केन्द्रित करना चाहते हैं और विभाजन के आकार की परवाह नहीं करते हैं तो आप Flex पॉवर का उपयोग कर सकते हैं। मैं फ्लेक्स का उपयोग करना पसंद करता हूं और तत्वों के लिए सटीक आकार का उपयोग नहीं करता हूं।

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

जैसा कि आप देख सकते हैं कि आउटर डिव फ्लेक्स कंटेनर है और इनर फ्लेक्स आइटम होना चाहिए जो flex: 1 1 auto;बेहतर समझ के लिए निर्दिष्ट हो , आप इस सरल नमूने को देख सकते हैं। http://jsfiddle.net/QMaster/hC223/

उममीद है कि इससे मदद मिलेगी।

Answer 18

मेरा जादू पसंद आएगा।

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</div>
</div>

Answer 19

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>

Comments

कोड हमेशा अच्छा होता है, लेकिन यह कुछ टिप्पणियों / संदर्भों को जोड़ने में भी मदद करता है कि यह मूल प्रश्न को कैसे संबोधित करता है।

— क्रेगकुलफील्ड