CSS का उपयोग करके पेज के केंद्र में टेबल कैसे रखें?

Question 1

मैं निम्नलिखित कोड का उपयोग कर रहा हूं। सीएसएस का उपयोग करके इस तालिका को पृष्ठ के केंद्र में कैसे रखा जाए?

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>The Main Page</title>
    </head>
    <body>
        <table>
            <tr>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
            </tr>
        </table>
    </body>
</html>

Question 2

html, body {
    width: 100%;
}
table {
    margin: 0 auto;
}

उदाहरण JSFiddle

मुख्य रूप से ब्लॉक तत्वों को संरेखित करना सबसे तुच्छ बात नहीं है। नीचे कुछ तरीके।

Question 3

आप निम्नलिखित सीएसएस का उपयोग करके देख सकते हैं:

table {
    margin: 0 auto;            
}

Question 4

1) सीएसएस में ऑटो के लिए क्षैतिज संरेखण सेट करना

margin-left: auto; margin-right: auto;

2) सीएसएस के बाद पृष्ठ के केंद्र में लंबवत संरेखण प्राप्त करें

html, body { width: 100%; }

उदाहरण के लिए :

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}

html, body {
    width: 100%;
}

</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
        <tr>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
        </tr>
</table>

</body>
</html>

Question 5

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}
</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
  <tr>
    <th>SNO</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>yazali</td>
  </tr>
</table>

</body>
</html>

Question 6

यदि आप जहां केंद्र के पूर्ण तालिका के बारे में पूछ रहे हैं, जैसे कुल केंद्र में कुछ बात।, तो आप निम्नलिखित कोड लागू कर सकते हैं।

margin: 0px auto;
margin-top: 13%;

सीएसएस में यह कोड आपको अपनी टेबल को तैरने जैसा बनाने देगा। मुझे बताओ अगर यह आपकी मदद करता है।

Question 7

बस इसे div में रखें फिर उस div css को नियंत्रित करें:

<div class="your_position">
  <table>
  </table>
</div>