एक div के भीतर एक बटन कैसे केंद्रित करें?

Question

मेरे पास एक div है जिसकी चौड़ाई 100% है।

मैं इसके भीतर एक बटन लगाना चाहूंगा, मैं यह कैसे कर सकता हूं?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

Comments

बटन के लिए आप किस कोड का उपयोग कर रहे हैं?

— डेविड गुयेन

मुझे संदेह है कि वह ऊर्ध्वाधर और क्षैतिज दोनों केंद्रित करना चाहता है। अब तक कोई भी समाधान इसे पूरा नहीं करता है। खड़ी ऊर्ध्वाधर = पर सीएसएस बहुत अच्छा नहीं है (

— mrtsherman

मुझे केवल यह कहने दें कि flexbox 2014 के लिए इस उत्तर को बेकार कर देता है। हाँ बच्चे!

— foreyez

मेरे पेज के केंद्र में html बटन को संरेखित करने

— maudulus

Answer 1

अद्यतन उत्तर

अपडेट करना क्योंकि मैंने देखा कि यह एक सक्रिय उत्तर है, हालांकि फ्लेक्सबॉक्स अब सही दृष्टिकोण होगा।

लाइव डेमो

ऊर्ध्वाधर और क्षैतिज संरेखण।

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

बस क्षैतिज (जब तक मुख्य फ्लेक्स अक्ष क्षैतिज है जो डिफ़ॉल्ट है)

#wrapper {
  display: flex;
  justify-content: center;
}

एक निश्चित चौड़ाई और कोई फ्लेक्सबॉक्स का उपयोग करके मूल उत्तर

यदि मूल पोस्टर ऊर्ध्वाधर और केंद्र को बटन की निश्चित चौड़ाई और ऊंचाई के लिए आसान बनाना चाहता है, तो निम्न प्रयास करें

लाइव डेमो

सीएसएस

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

बस क्षैतिज संरेखण उपयोग के लिए या तो

button{
    margin: 0 auto;
}

या

div{
    text-align:center;
}

Comments

-1 यह भयानक है। असल में, आप चौड़ाई को 100% और फिर मार्जिन को -50 पर सेट करते हैं। लेकिन अन्य समस्याओं का कारण बनता है, जैसे बटन युक्त तत्व से ऊपर उठता है, और आकार बदलने के साथ अच्छी तरह से काम नहीं करता है।

— CodyBugstein

हे कम से कम अपने डाउन वोट @ इमर्रे को समझाने के लिए धन्यवाद, यह भी ध्यान दें, मैंने कहा कि निश्चित चौड़ाई और ऊंचाई, चर नहीं। इसलिए आकार बदलना एक कारक नहीं है। "मूल रूप से" मैंने 100px की चौड़ाई निर्धारित की है , न कि 100%, और मार्जिन से -50px जो आधा है। यह केंद्रित करने के लिए एक सुंदर मानक तरीका रहा है। मैं आपके उत्तर की प्रतीक्षा करता हूं, हालांकि :)

— लोकतर

आपका वेल्ड्स (कठोर के लिए खेद है, खुशी है कि आपके पास हास्य की भावना है) मेरा मतलब 100px है। मुझे महसूस नहीं हुआ कि आपने "फिक्स्ड" लिखा है, लेकिन फिर भी मुझे लगता है कि यह उत्तर ज्यादातर स्थितियों में अच्छा नहीं होगा

— कोडीबस्टीन

Answer 2

आप बस बना सकते हैं:

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

या आप इसके बजाय ऐसा कर सकते हैं:

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

पहला केंद्र div के अंदर सब कुछ संरेखित करेगा। अन्य एक केंद्र सिर्फ बटन को संरेखित करेगा।

Answer 3

एट वॉयला:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

अद्यतन : यदि ओपी क्षैतिज और ऊर्ध्वाधर केंद्र की तलाश में है, तो यह उत्तर इसे एक निश्चित चौड़ाई / ऊंचाई तत्व के लिए करेगा।

Comments

आपको "प्रदर्शन: ब्लॉक;"

— सोल्यूएबल नॉनगन

@SoluableNonagon यह बात है! "डिस्प्ले: ब्लॉक" "मार्जिन: 0 ऑटो" के साथ चाल करता है

— टॉमस लुकाक

Answer 4

मार्जिन: 0 ऑटो; केवल क्षैतिज केंद्र के लिए सही उत्तर है। दोनों तरीकों को केंद्रित करने के लिए कुछ इस तरह से काम करेगा, jquery का उपयोग करके:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

---

अद्यतन करें ... पांच साल बाद , कोई व्यक्ति DIV तत्व पर फ्लेक्सबॉक्स का उपयोग आसानी से क्षैतिज और लंबवत रूप से बटन को केंद्र में करने के लिए कर सकता है।

सर्वोत्तम समर्थन के लिए सभी ब्राउज़र उपसर्गों को शामिल करना

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

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

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

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

Comments

jQuery? गंभीरता से?

— प्राणेश रवि

@PraneshRavi - 2011 में सीएसएस में कई विकल्प उपलब्ध नहीं थे जो कि किसी चीज़ को लंबवत रूप से केंद्र में रखते हैं, इसलिए हाँ, जावास्क्रिप्ट असामान्य नहीं था यदि आप किसी तत्व की सटीक ऊंचाई और चौड़ाई नहीं जानते थे, और मार्जिन को घटा सकते थे।

— एडेनो

आप हमेशा एक तत्व को लंबवत और क्षैतिज रूप से केंद्रित करने के लिए फ्लेक्स का उपयोग कर सकते हैं।

— प्राणेश रवि

@PraneshRavi - हाँ आप कर सकते हैं, फ्लेक्सबॉक्स इस सवाल का एक शानदार जवाब है, और मैं इसे जोड़ूंगा, लेकिन 2011 में कोई फ्लेक्सबॉक्स नहीं था।

— एडेनो

@JGallardo - मुझे लगता है कि आप हिस्सा है जहां अन्य उत्तर न सिर्फ क्षैतिज बटन केंद्रित करने के लिए कोशिश कर रहे हैं, लेकिन खड़ी रूप में अच्छी तरह है, और याद है कि 9 साल पहले ऐसा करने के लिए अकेले सीएसएस के साथ नहीं वास्तव में किसी भी अच्छा विकल्प थे

— adeneo

Answer 5

प्रदान किए गए सीमित विवरण के साथ, मैं सबसे सरल स्थिति मानूंगा और कहूंगा कि आप उपयोग कर सकते हैं text-align: center :

http://jsfiddle.net/pMxty/

Answer 6

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

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

और फिर अपने बटन में कक्षा जोड़ रहा है।

<button class="Center">Demo</button> 

Answer 7

आपको इसे सरलता से यहाँ ले जाना चाहिए:

पहले आपके पास अपने पाठ या बटन की प्रारंभिक स्थिति है:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

इस css कोड लाइन को जोड़कर h2 टैग या बटन टैग रखने वाले div टैग में

शैली: "पाठ-संरेखण: केंद्र;"

अंतिम परिणाम कोड होगा:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

Comments

आप वेलकम भाई हैं

— नादिर हमीदो

Answer 8

इस में आए और सोचा था कि मैं समाधान मैं भी इस्तेमाल किया है, जो इस्तेमाल छोड़ चाहते हैं line-heightऔर text-align: centerदोनों ऊर्ध्वाधर और क्षैतिज केंद्रित करने के लिए:

JSFiddle काम करने के लिए यहां क्लिक करें

Answer 9

एक केंद्रित करने के <button type = "button">लिए एक के भीतर दोनों अनुलंब और क्षैतिज <div>जो चौड़ाई गतिशील अपने मामले में की तरह की जाती है, यह करने के लिए क्या है:

1. text-align: center;रैपिंग पर सेट करें <div>: जब भी आप आकार बदलेंगे तो यह बटन केंद्र में होगा<div> (या खिड़की के बजाय)

2. ऊर्ध्वाधर संरेखण के लिए, आपको margin: valuepx;बटन के लिए सेट करना होगा । यह गणना करने के तरीके पर नियम है valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

यहाँ एक जेएस बिन डेमो है ।

Answer 10

अधिकांश मामलों पर लागू होने वाला सुपर सरल उत्तर सिर्फ मार्जिन को 0 autoसेट करना और डिस्प्ले को सेट करना है block। आप देख सकते हैं कि मैंने कोडपैन पर अपने डेमो में अपने बटन को कैसे केंद्रित किया

Answer 11

सबसे आसान चीज यह है कि इसे "div" के रूप में इनपुट करें, इसे "मार्जिन: 0 ऑटो" दें, लेकिन अगर आप चाहते हैं कि इसे केंद्रित किया जाए तो आपको इसे एक चौड़ाई देने की आवश्यकता है

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

Answer 12

उत्तरदायी सीएसएस विकल्प मूल तत्व आकार (स्पष्टता और पृथक्करण चिंताओं के लिए डेटा विशेषता हुक का उपयोग करके) के साथ संबंधित होने के बिना एक बटन को लंबवत और क्षैतिज रूप से केंद्रित करने का विकल्प :

एचटीएमएल

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

सीएसएस

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

फिडल: https://jsfiddle.net/crrollyson/zebo1z8f/

Answer 13

एक div में अपने बटन को केंद्रित करने का उत्तरदायी तरीका:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

Comments

इनलाइन शैलियों को हटाकर और डेमो दिखाते हुए इस उत्तर को बेहतर बनाया जा सकता है

— JGallardo

Answer 14

डिवोर्स देना #div है और बटन # बटन है:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

फिर बटन को हमेशा की तरह div में घोंसला बनाएं।