क्षैतिज और लंबवत रूप से div के केंद्र में एक टेबल कैसे रखें

Question

हम एक छवि को पृष्ठभूमि की छवि की <div>तरह सेट कर सकते हैं:

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

मुझे <div>क्षैतिज और लंबवत रूप से केंद्र में एक तालिका सेट करने की आवश्यकता है । क्या कोई क्रॉस-ब्राउज़र समाधान का उपयोग कर रहा है CSS?

Answer 1

CSS में Centering सबसे बड़े मुद्दों में से एक है। हालाँकि, कुछ तरकीबें मौजूद हैं:

अपनी तालिका को क्षैतिज रूप से केंद्र में रखने के लिए, आप बाएं और दाएं मार्जिन को ऑटो पर सेट कर सकते हैं:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

इसे लंबवत रूप से केन्द्रित करने के लिए, जावास्क्रिप्ट का उपयोग करने का एकमात्र तरीका है:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

कोई vertical-align:middleतालिका संभव नहीं है क्योंकि एक ब्लॉक एक ब्लॉक है और एक इनलाइन तत्व नहीं है।

संपादित करें

यहाँ एक वेबसाइट है जो सीएसएस सेंटिंग सॉल्यूशंस को प्रस्तुत करती है: http://howtocenterincss.com/

Comments

सिली टेबल। धन्यवाद, इस (मार्जिन: 0 ऑटो) ने भी मेरी मदद की।

— सीजर

testHeightयहाँ क्या है ?

— अजय कुलकर्णी

@AjayKulkarni #testतत्व की ऊंचाई । गलतफहमी के लिए खेद है।

— ldiqual

हाँ, मैं यह समझ से बाहर .... कृपया विस्तार से बताएं javascript, jQuery, AJAXआदि ताकि अन्य लोग समझ सकते हैं कि

— अजय कुलकर्णी

बस मैं यह चाहता हूं! मैं कुछ घंटों के लिए पैडिंग्स, मार्जिन से फ़िडलिंग कर रहा हूं!

— chfw

Answer 2

यहाँ मेरे लिए क्या काम किया गया है:

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

#table {
  align-self: center;
}

और इसने इसे लंबवत और क्षैतिज रूप से संरेखित किया।

Comments

यह सबसे अच्छा जवाब होना चाहिए!

— रीओपीड्रा

Answer 3

क्षैतिज रूप से केंद्र की स्थिति के लिए आप कह सकते हैं width: 50%; margin: auto;। जहाँ तक मुझे पता है, वह क्रॉस ब्राउज़र है। ऊर्ध्वाधर संरेखण के लिए आप कोशिश कर सकते हैं vertical-align:middle;, लेकिन यह केवल पाठ के संबंध में काम कर सकता है। इस योग्य यद्यपि एक प्रयास।

Answer 4

बस margin: 0 auto;अपने को जोड़ो table। किसी भी संपत्ति को जोड़ने की आवश्यकता नहीं हैdiv

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

नोट: अपने केंद्र में तालिका के संरेखण की कल्पना करने के लिए div में जोड़ा गया पृष्ठभूमि रंग

Answer 5

इसके अतिरिक्त, यदि आप दोनों को क्षैतिज और लंबवत रूप से केन्द्रित करना चाहते हैं - प्रवाह-डिजाइन होने के बजाय (ऐसे मामलों में, पिछले समाधान लागू होते हैं) - आप कर सकते हैं:

1. मुख्य div को स्थिति absoluteया relativeस्थिति के रूप में घोषित करें (मैं इसे कॉल करता हूं content)।
2. एक आंतरिक विभाजन घोषित करें, जो वास्तव में टेबल को पकड़ लेगा (मैं इसे कहता हूं wrapper)।
3. wrapperडिव के अंदर ही टेबल डिक्लेयर करें ।
4. आवरण ऑब्जेक्ट के "पंजीकरण बिंदु" को केंद्र में बदलने के लिए CSS ट्रांसफ़ॉर्म लागू करें।
5. मूल वस्तु के केंद्र में आवरण वस्तु ले जाएं।

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }

<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

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

Answer 6

आप निम्नलिखित तकनीक का उपयोग करते हुए, ऊर्ध्वाधर और क्षैतिज रूप से एक बॉक्स को केंद्र में रख सकते हैं:

Outher कंटेनर:

• होना चाहिए display: table;

आंतरिक कंटेनर:

• होना चाहिए display: table-cell;
• होना चाहिए vertical-align: middle;
• होना चाहिए text-align: center;

सामग्री बॉक्स:

• होना चाहिए display: inline-block;

यदि आप इस तकनीक का उपयोग करते हैं, तो बस अपनी तालिका (किसी अन्य सामग्री के साथ जिसे आप इसके साथ जाना चाहते हैं) सामग्री बॉक्स में जोड़ें।

डेमो:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

यह भी देखें फिडल !

Answer 7

मुझे पता चला कि मुझे शामिल करना था

body { width:100%; }

टेबल के लिए काम करने के लिए "मार्जिन: 0 ऑटो" के लिए।