Question

我一直在阅读所有内容，但我不知道为什么我无法将按钮置于顶部图像的中心位置。 .page_wrap边距都是自动的？

我正试图让按钮以桌面浏览器和三星音符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>

Answer 1

将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;
}

编辑：如果你愿意，我想你可以继续使用表格。但是，布局表通常不被视为“最佳实践”。例如，响应式设计变得更加困难，因为表格无法自动适应不同的屏幕尺寸。

Answer 2

对于您的桌面问题，我会尝试：

  .page_wrap
{
    border:0px solid black;
    width:500px;
    margin: 0 auto;

}
body {
    background-image: url("http://i.imgur.com/KH2LTHz.jpg");
    width:100%;
}

并从html文档中删除样式。

另一件事，您的页面与Samsung note 3浏览器不兼容

您可以尝试使用Media Queries来帮助您适应桌面和智能手机的页面。

我无法集中div

2 个答案: