[英]Can't centre a table within a div in HTML and CSS - responsive website
我正在嘗試在 CSS 中將 HTML 表居中，但代碼不起作用。 我嘗試過 justify-content、align-content、margin 等，但似乎沒有任何效果。 該網站需要響應，因此所有值都必須是百分比（這使得它有點難）。 此外，由於某種原因，某些列的寬度與最后一列不同？？ 也不確定。 我將代碼放在下面。
.numberButton { background-color: #707070; width: 100%; height: 35%; text-align: center; }.tdNumber { width: 30%; height: 40%; } #numberTable { align-content: center; justify-content: center; padding: 20px; text-align: center; margin: 0 auto; width: 90%; } #numberBackground { background-color: #3968CB; margin: 0px; width: auto; height: 400%; justify-content: center; }
<body id="numberBackground"> <div id="numberTable"> <table> <tbody> <tr> <td class="tdNumber"><button id="one" class="numberButton">1</button></td> <td class="tdNumber"><button id="two" class="numberButton">2</button></td> <td class="tdNumber"><button id="three" class="numberButton">3</button></td> <td class="tdNumber"><button id="four" class="numberButton">4</button></td> </tr> <tr> <td class="tdNumber"><button id="five" class="numberButton">5</button></td> <td class="tdNumber"><button id="six" class="numberButton">6</button></td> <td class="tdNumber"><button id="seven" class="numberButton">7</button></td> <td class="tdNumber"><button id="eight" class="numberButton">8</button></td> </tr> <tr> <td class="tdNumber"><button id="nine" class="numberButton">9</button></td> <td class="tdNumber"><button id="ten" class="numberButton">10</button></td> <td class="tdNumber"><button id="eleven" class="numberButton">11</button></td> <td class="tdNumber"><button id="twelve" class="numberButton">12</button></td> </tr> <tr> <td class="tdNumber"><button id="thirteen" class="numberButton">13</button></td> <td class="tdNumber"><button id="fourteen" class="numberButton">14</button></td> <td class="tdNumber"><button id="fifteen" class="numberButton">15</button></td> <td class="tdNumber"><button id="sixteen" class="numberButton">16</button></td> </tr> <tr> <td class="tdNumber"><button id="seventeen" class="numberButton">17</button></td> <td class="tdNumber"><button id="eighteen" class="numberButton">18</button></td> <td class="tdNumber"><button id="nineteen" class="numberButton">19</button></td> <td class="tdNumber"><button id="twenty" class="numberButton">20</button></td> </tr> <tr> <td><button onclick="location.href='Topics Page.html'" type="button" id="backanimal" class="numberButton">BACK</button></td> <td><button onclick="location.href='Numbers_Test.html'" type="button" id="testanimal" class="numberButton">TEST</button></td> </tr> </tbody> </table> </div>
嗨，如果你想使用align-items: center; 和justify-content: center; 首先必須使用display: flex和...，我修復了你的代碼，但你必須更多地組織它。
#numberTable {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
margin: 0 auto;
}
.tdNumber{
height: auto;
padding: .2rem;
}
只需在您的 numberBackground 標簽中添加下面提到的 CSS 代碼，您的問題就會得到解決。 對於內部框元素大小，您可以使用 flex-child 屬性。
#numberBackground {
background-color: #3968CB;
margin: 0px;
width: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* justify-content: center; */
}
將 position absolute 添加到您的表中。 然后使用變換到 position 它在中心。
.numberButton { background-color: #707070; width: 100%; height: 35%; text-align: center; }.tdNumber { width: 30%; height: 40%; } #numberTable { align-content: center; justify-content: center; padding: 20px; text-align: center; margin: 0 auto; width: 90%; } table { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #numberBackground { background-color: #3968CB; margin: 0px; width: auto; height: 400%; justify-content: center; }
<div id="numberTable"> <table> <tbody> <tr> <td class="tdNumber"><button id="one" class="numberButton">1</button></td> <td class="tdNumber"><button id="two" class="numberButton">2</button></td> <td class="tdNumber"><button id="three" class="numberButton">3</button></td> <td class="tdNumber"><button id="four" class="numberButton">4</button></td> </tr> <tr> <td class="tdNumber"><button id="five" class="numberButton">5</button></td> <td class="tdNumber"><button id="six" class="numberButton">6</button></td> <td class="tdNumber"><button id="seven" class="numberButton">7</button></td> <td class="tdNumber"><button id="eight" class="numberButton">8</button></td> </tr> <tr> <td class="tdNumber"><button id="nine" class="numberButton">9</button></td> <td class="tdNumber"><button id="ten" class="numberButton">10</button></td> <td class="tdNumber"><button id="eleven" class="numberButton">11</button></td> <td class="tdNumber"><button id="twelve" class="numberButton">12</button></td> </tr> <tr> <td class="tdNumber"><button id="thirteen" class="numberButton">13</button></td> <td class="tdNumber"><button id="fourteen" class="numberButton">14</button></td> <td class="tdNumber"><button id="fifteen" class="numberButton">15</button></td> <td class="tdNumber"><button id="sixteen" class="numberButton">16</button></td> </tr> <tr> <td class="tdNumber"><button id="seventeen" class="numberButton">17</button></td> <td class="tdNumber"><button id="eighteen" class="numberButton">18</button></td> <td class="tdNumber"><button id="nineteen" class="numberButton">19</button></td> <td class="tdNumber"><button id="twenty" class="numberButton">20</button></td> </tr> <tr> <td><button onclick="location.href='Topics Page.html'" type="button" id="backanimal" class="numberButton">BACK</button></td> <td><button onclick="location.href='Numbers_Test.html'" type="button" id="testanimal" class="numberButton">TEST</button></td> </tr> </tbody> </table> </div>
從 pc 視圖轉到移動設備時，無法在響應式網站上的 div 內對齊（居中）文本
[英]Can't align (in centre) text inside of div on responsive website when going from pc view to mobile
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.