I'm having trouble centering a div
Question
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?
I am trying to get the buttons to center on a desktop browser and samsung note 3 browser
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 answers
solution1
1 2016-03-06 07:57:26
To horizontally center the div itself:
/* If the div has the class "button-wrapper" */
.button-wrapper {
margin: 0 auto;
}
Or, to horizontally center the buttons within the 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.
solution2
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.
another thing you your page is not compatible for Samsung note 3 browser
you can try and work with Media Queries to help fit your page for desktop and smartphone.
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.