html - Centering <a> in <div> -
i trying <a>
tags centered in div#teacherpageoptions
. centered in microsoft expression web, not when view page in browser. doing wrong?
#blackbar { background-color: chartreuse; padding: 10px; height: 57px; } html { height: 100%; } body, #teacherpage { min-height: 100%; background-color: #f4f4f4; } hr { visibility: hidden; } .center { padding-bottom: 50px; padding-top: 50px; } .button { display: block; width: 115px; height: 25px; background: chartreuse; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold; } .button1 { display: block; width: 115px; height: 25px; background: #008dde; padding: 10px; border-radius: 5px; color: white; font-weight: bold; position: absolute; } p { color: white; font-weight: bold; line-height: 40px; } .auto-style1 { /* make username hang little left. */ margin-left: 53px; } #teacherpage { height: 327px; background-color: gray; } #teacherpageoptions { margin-left: auto; margin-right: auto; height: auto; } .auto-style2 { margin-right: 0px; } .wrapper { text-align: center; } .auto-style3 { margin-bottom: 0px; } { height: 100%; opacity: 0.5; width: 100%; } a:hover { opacity: 1; -webkit-transform: scale(3); -ms-transform: scale(3); transform: scale(3); }
<div id="blackbar" class="auto-style3"> <a href="login2.php" class="button" style="float:left; text-decoration: none;"> logout </a> <p style=" float:right; height: 36px;" class="auto-style1">username <?php session_start(); echo $name=$ _session[ 'name'] ?> </p> </div> <hr> <div id="teacherpageoptions"> <div class="wrapper" style="height:100px "><a href="makequestions.php" class="button1" style="text-decoration: none"> make questions </a> <div class="center"></div> <a href="makeexam.php" class="button1" style="text-decoration: none"> make exam </a> </div> </div>
remove position: absolute;
.button1
, add margin: 0 auto;
instead.
#blackbar { background-color: chartreuse; padding: 10px; height: 57px; } html { height: 100%; } body, #teacherpage { min-height: 100%; background-color: #f4f4f4; } hr { visibility: hidden; } .center { padding-bottom: 50px; padding-top: 50px; } .button { display: block; width: 115px; height: 25px; background: chartreuse; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold; } .button1 { display: block; width: 115px; height: 25px; background: #008dde; padding: 10px; border-radius: 5px; color: white; font-weight: bold; /* position: absolute; */ margin: 0 auto; } p { color: white; font-weight: bold; line-height: 40px; } .auto-style1 { /* make username hang little left. */ margin-left: 53px; } #teacherpage { height: 327px; background-color: gray; } #teacherpageoptions { margin-left: auto; margin-right: auto; height: auto; } .auto-style2 { margin-right: 0px; } .wrapper { text-align: center; } .auto-style3 { margin-bottom: 0px; } { height: 100%; opacity: 0.5; width: 100%; } a:hover { opacity: 1; -webkit-transform: scale(3); -ms-transform: scale(3); transform: scale(3); }
<div id="blackbar" class="auto-style3"> <a href="login2.php" class="button" style="float:left; text-decoration: none;"> logout </a> <p style=" float:right; height: 36px;" class="auto-style1">username <?php session_start(); echo $name=$ _session[ 'name'] ?> </p> </div> <hr> <div id="teacherpageoptions"> <div class="wrapper" style="height:100px "><a href="makequestions.php" class="button1" style="text-decoration: none"> make questions </a> <div class="center"></div> <a href="makeexam.php" class="button1" style="text-decoration: none"> make exam </a> </div> </div>