我无法将 div 居中
[英]I'm having trouble centering a div
问题描述
I have been reading everything but I'm not sure why i can not get the buttons to center under the top image.
我一直在阅读所有内容，但我不确定为什么我无法将按钮置于顶部图像下方的中心。 The .page_wrap margins are both auto? .page_wrap 边距都是自动的？
I am trying to get the buttons to center on a desktop browser and samsung note 3 browser我试图让按钮在桌面浏览器和三星 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
To horizontally center the div itself:要水平居中 div 本身：
/* If the div has the class "button-wrapper" */
.button-wrapper {
margin: 0 auto;
}
Or, to horizontally center the buttons within the div:或者，要将 div 中的按钮水平居中：
/* If each button has the class "button-centered" */
.button-centered {
text-align: center;
}
EDIT: I suppose you could keep using tables if you like.编辑：我想如果你愿意，你可以继续使用表格。 However, tables for layout is often not considered "best practice."但是，布局表格通常不被视为“最佳实践”。 For example, responsive design becomes more difficult because tables cannot automatically adapt to different screen sizes.例如，响应式设计变得更加困难，因为表格不能自动适应不同的屏幕尺寸。
解决方案2
0 2016-03-06 08:51:06
for your desktop problem i would try:对于您的桌面问题，我会尝试：
.page_wrap
{
border:0px solid black;
width:500px;
margin: 0 auto;
}
body {
background-image: url("http://i.imgur.com/KH2LTHz.jpg");
width:100%;
}
and remove style from the html document.并从 html 文档中删除样式。
another thing you your page is not compatible for Samsung note 3 browser另一件事你你的页面与三星 Note 3 浏览器不兼容
you can try and work with Media Queries to help fit your page for desktop and smartphone.您可以尝试使用媒体查询来帮助您的页面适合桌面和智能手机。
. .
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.