我無法將 div 居中
[英]I'm having trouble centering a div
問題描述
我一直在閱讀所有內容，但我不確定為什么我無法將按鈕置於頂部圖像下方的中心。 .page_wrap 邊距都是自動的？
我試圖讓按鈕在桌面瀏覽器和三星 Note 3 瀏覽器上居中
body { background-image: url("http://i.imgur.com/KH2LTHz.jpg"); } .page_wrap { border:0px solid black; width:350px; height:10px; margin-left:auto; margin-right:auto; } .space { border:0px solid black; width:250px; height:150px; margin-left:auto; margin-right:auto; } input[type="button"], input[type="submit"], button { background: none; background-image: url(http://i.imgur.com/9qwHx0c.png); background-position: center center; background-repeat: no-repeat; border: 0px; height: 71px; width: 227px; font-weight:200; font-size: 40px; color: #FFFFFF; /* add the rest of your attributes here */ } img.shedremote { display: block; margin-left: auto; margin-right: auto; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheets/shedmine.css" /> <script> var device = "http://192.168.1.178/"; function reqListener() { console.log(this.responseText); } function setLed(i, state) { if (state === undefined || state !== 'on') state = 'off'; var oReq = new XMLHttpRequest(); oReq.addEventListener("load", reqListener); if (i === 'all') { oReq.open("GET", device + "?all=" + state); } else { oReq.open("GET", device + "?led" + i + "=" + state); } oReq.send(); } </script> </head> <body> <div class="space"></div> <img class="shedremote" src="http://i.imgur.com/wTL0PlY.png" alt="shedremote"> <div class="space"></div> <div class="page_wrap"> <table style="width:200%"> <tr> <td> <input type="button" value="Lights on!" onClick="setLed(1,'on')"/> </td> <td> <input type="button" value="Lights Off!" onClick="setLed(1,'off')"/> </td> </tr> <tr> <td> <input type="button" value="door open" onClick="setLed(2,'on')" /> </td> <td> <input type="button" value="door locked" onClick="setLed(2,'off')"/> </td> </tr> <tr> <td> <input type="button" value="3 on" onClick="setLed(3,'on')" /> </td> <td> <input type="button" value="3 off" onClick="setLed(3,'off')" /> </td> </tr> <tr> <td> <input type="button" value="Disco on" onClick="setLed(4,'on')" /> </td> <td> <input type="button" value="Disco off" onClick="setLed(4,'off')" /> </td> </tr> <tr> <td> <input type="button" value="5 on" onClick="setLed(5,'on')" /> </td> <td> <input type="button" value="5 off" onClick="setLed(5,'off')" /> </td> </tr> <tr> <td> <input type="button" value="6 on" onClick="setLed(6,'on')" /> </td> <td> <input type="button" value="6 off" onClick="setLed(6,'off')" /> </td> </tr> <tr> <td> <input type="button" value="7 on" onClick="setLed(7,'on')" /> </td> <td> <input type="button" value="7 off" onClick="setLed(7,'off')" /> </td> </tr> <tr> <td> <input type="button" value="8 on" onClick="setLed(8,'on')" /> </td> <td> <input type="button" value="8 off" onClick="setLed(8,'off')" /> </td> </tr> </table> </div> </body> </html>
2 個解決方案
解決方案1
1 2016-03-06 07:57:26
要水平居中 div 本身：
/* If the div has the class "button-wrapper" */
.button-wrapper {
margin: 0 auto;
}
或者，要將 div 中的按鈕水平居中：
/* If each button has the class "button-centered" */
.button-centered {
text-align: center;
}
編輯：我想如果你願意，你可以繼續使用表格。 但是，布局表格通常不被視為“最佳實踐”。 例如，響應式設計變得更加困難，因為表格不能自動適應不同的屏幕尺寸。
解決方案2
0 2016-03-06 08:51:06
對於您的桌面問題，我會嘗試：
.page_wrap
{
border:0px solid black;
width:500px;
margin: 0 auto;
}
body {
background-image: url("http://i.imgur.com/KH2LTHz.jpg");
width:100%;
}
並從 html 文檔中刪除樣式。
另一件事你你的頁面與三星 Note 3 瀏覽器不兼容
您可以嘗試使用媒體查詢來幫助您的頁面適合桌面和智能手機。
.
麻煩讓Div居中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.