Hello, first off I stink at CSS. Issue is I can't get all the buttons to be dead center in their div when they're in a form field. So far I can only get one to do it (which is odd). You can see I don't really know how to use grid-column or grid-rows that well. Please help fix this:
<html>
<head>
<style>
div.container {
display: grid;
grid-template-columns: 100px 20px auto;
grid-template-rows: auto;
margin-left: auto;
margin-right: auto;
}
div.header {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 5;
background-color: white;
width: 100px;
border: 1px solid #000000;
}
div.fouth {
grid-column-end: 4;
grid-row-start: 3;
grid-row-end; 3;
background-color: Silver;
width: 100px;
height: 30px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
div.middle {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end; 1;
background-color: Silver;
width: 100px;
height: 30px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
height: 100%;
width: 100%;
position: relative;
}
.child {
background: silver;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div class="parent" align="center">
<img src="thingLogoRoundBlack.gif">
<div class="child">
<div class="header" align="center">Main Menu</div>
<cfif IsDefined("Session.POSLevel") AND #Session.POSLevel# GT "0">
<div class="middle" align="center">
<form action="pos.cfm" target="_top" method="post">
<input type="hidden" name="NewLogin" Value="1">
<input type="button" name="pos" value="Point of Sale" style="font-size: 12px;" onClick="this.form.submit()">
</form>
</div></cfif>
<div class="middle" align="center">
<form action="index.cfm" target="_top" method="post">
<input type="hidden" name="LogoffShift" value="1">
<input type="button" name="offshift" value="Log Off Shift" style="font-size: 12px;" onClick="this.form.submit()">
</form>
</div>
<div class="middle" align="center">
<form action="lookup.cfm" target="_top" method="post">
<input type="button" name="pl" value="Part Lookup " style="font-size: 12px;" onClick="this.form.submit()">
</form>
</div>
<cfif IsDefined("Session.POSLevel") AND #Session.POSLevel# GT "1">
<div class="fouth" align="center">
<input type="button" name="SaleSumbtn" value=" Summary " style="font-size: 12px;" onClick="SaleSummary()">
</div>
</cfif>
<cfif IsDefined("Session.thingboLevel") AND #Session.thingboLevel# GT "0">
<div class="middle" align="center">
<form action="thingbo/index.cfm" target="_top" method="post">
<input type="button" name="bo" value="Back Office " style="font-size: 12px;" onClick="this.form.submit()">
</form>
</div>
</cfif>
</div>
</div>
</body>
</html>
Thanks for any help.
AdChoices