如何将一组按钮集中放置在页脚的右侧？

Question

我一直试图保持四个按钮集中在页脚的右侧，但它似乎像页脚设置为百分比而不是像素，我试图将其设置为百分比，但它忽略了我的“订单“，我怎样才能将页脚设置为60px，并将按钮放在右侧并垂直居中放置，我甚至使用过flexbox，但是由于缺乏关于如何使用它的知识，我多次失败。

例如，如果您在全屏幕中查看我的页面，您会注意到垂直中心上的按钮不正确，这就是我想要做的，页脚不相关，但是如果您知道如何设置页脚到像素，我将更容易解决“集中”问题。

如果有什么遗漏，评论，我会提供它，不管它是什么。

在此先感谢。

$(function() { 
 
    $("#btfirst").button({ 
 
    icons: { 
 
     primary: "ui-icon-seek-first" 
 
    }, 
 
    text: false 
 
    }); 
 
    $("#btfirst").css({ 
 
    'height': '1.3em', 
 
    'margin': '1px -1px 1px 0px' 
 
    }); 
 

 
    $("#btprev").button({ 
 
    icons: { 
 
     primary: "ui-icon-seek-prev" 
 
    }, 
 
    text: false 
 
    }); 
 
    $("#btprev").css({ 
 
    'height': '1.3em', 
 
    'margin': '1px -1px 1px 0px' 
 
    }); 
 

 

 
    $("#btnext").button({ 
 
    icons: { 
 
     primary: "ui-icon-seek-next" 
 
    }, 
 
    text: false 
 
    }); 
 
    $("#btnext").css({ 
 
    'height': '1.3em', 
 
    'margin': '1px -1px 1px 0px' 
 
    }); 
 

 

 
    $("#btlast").button({ 
 
    icons: { 
 
     primary: "ui-icon-seek-end" 
 
    }, 
 
    text: false 
 
    }); 
 
    $("#btlast").css({ 
 
    'height': '1.3em', 
 
    'margin': '1px 1px 1px 0px' 
 
    }); 
 

 
    $("body").css("overflow", "hidden"); 
 
});

html { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
@font-face { 
 
    font-family: 'agroverdanab'; 
 
    src: url('./fonts/agroverdanab.eot'); 
 
    src: local('agroverdanab'), url('./fonts/agroverdanab.ttf') format('truetype'); 
 
    font-family: 'agroverdana'; 
 
    src: url('./fonts/agroverdana.eot'); 
 
    src: local('agroverdana'), url('./fonts/agroverdana.ttf') format('truetype'); 
 
} 
 
body { 
 
    float: center; 
 
    border: 1px solid #9BC2E6; 
 
    box-sizing: border-box; 
 
    width: 99.6%; 
 
    height: 99.3%; 
 
    font-family: 'agroverdana'; 
 
    font-size: 14px; 
 
    margin: 3px; 
 
} 
 
.scrollingtable { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    overflow: hidden; 
 
    width: auto; 
 
    min-width: 100%; 
 
    height: 98%; 
 
    min-height: 95%; 
 
    font-family: 'agroverdana'; 
 
    font-size: 16px; 
 
    line-height: 20px; 
 
    padding: 0 0 100px 0; 
 
    text-align: left; 
 
} 
 
.scrollingtable * { 
 
    box-sizing: border-box; 
 
} 
 
.scrollingtable > div { 
 
    position: relative; 
 
    border-top: 1px solid white; 
 
    height: 100%; 
 
    padding-top: 20px; 
 
} 
 
.scrollingtable > div:before { 
 
    top: 0; 
 
    background: #9BC2E6; 
 
} 
 
.scrollingtable > div:before, 
 
.scrollingtable > div > div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
} 
 
.scrollingtable > div > div { 
 
    min-height: 0; 
 
    max-height: 100%; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
    border: 1px solid white; 
 
} 
 
.scrollingtable > div > div:after { 
 
    background: white; 
 
} 
 
/*match page background color*/ 
 

 
.scrollingtable > div > div > table { 
 
    width: 100.085%; 
 
    border-spacing: 0; 
 
    margin-top: -20px; 
 
    margin-right: 1px; 
 
} 
 
.scrollingtable > div > div > table > caption { 
 
    font-size: 15px; 
 
    position: absolute; 
 
    top: -20px; 
 
    margin-top: -1px; 
 
    width: 100%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
.scrollingtable > div > div > table > * > tr > * { 
 
    padding: 0; 
 
} 
 
.scrollingtable > div > div > table > thead { 
 
    vertical-align: bottom; 
 
    white-space: nowrap; 
 
    text-align: center; 
 
} 
 
.scrollingtable > div > div > table > thead > tr > * > div { 
 
    display: inline-block; 
 
    padding: 0 6px 0 6px; 
 
} 
 
.scrollingtable > div > div > table > thead > tr >:first-child:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 20px; 
 
    border-left: 1px solid #9BC2E6; 
 
} 
 
.scrollingtable > div > div > table > thead > tr > * > div[label]:before, 
 
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child, 
 
.scrollingtable > div > div > table > thead > tr > * +:before { 
 
    position: absolute; 
 
    top: 0; 
 
    white-space: pre-wrap; 
 
    color: black; 
 
} 
 
.scrollingtable > div > div > table > thead > tr > * > div[label]:before, 
 
.scrollingtable > div > div > table > thead > tr > * > div[label]:after { 
 
    content: attr(label); 
 
} 
 
.scrollingtable > div > div > table > thead > tr > * +:before { 
 
    content: ""; 
 
    display: block; 
 
    min-height: 20px; 
 
    padding-top: 1px; 
 
    border-left: 2px solid white; 
 
} 
 
.scrollingtable .scrollbarhead { 
 
    float: right; 
 
} 
 
.scrollingtable .scrollbarhead:before { 
 
    position: absolute; 
 
    width: 110px; 
 
    top: 1px; 
 
    background: #9BC2E6; 
 
} 
 
.scrollingtable > div > div > table > tbody > tr:after { 
 
    content: ""; 
 
    display: table-cell; 
 
    position: relative; 
 
    padding: 0; 
 
    border-top: 1px solid white; 
 
    top: -1px; 
 
} 
 
.scrollingtable > div > div > table > tbody { 
 
    vertical-align: top; 
 
} 
 
.scrollingtable > div > div > table > tbody > tr { 
 
    background: white; 
 
} 
 
.scrollingtable > div > div > table > tbody > tr > * { 
 
    border-bottom: 1px solid white; 
 
    padding: 0 6px 0 6px; 
 
    height: 20px; 
 
} 
 
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * { 
 
    border-bottom: none; 
 
} 
 
.scrollingtable > div > div > table > tbody > tr:nth-child(even) { 
 
    background: #DDEBF7; 
 
} 
 
.scrollingtable > div > div > table > tbody > tr > * + * { 
 
    border-left: 2px solid white; 
 
} 
 
.scrollingtable > div:before { 
 
    top: 0; 
 
    background: 
 
    /*#b4d3ed*/ 
 
    #9fc7e8 
 
    /*#9BC2E6*/ 
 
    ; 
 
} 
 
.footerButton { 
 
    width: 60px; 
 
    height: 25px; 
 
    margin: 3px 10px 1px 0; 
 
    font-family: 'agroverdana'; 
 
    background-color: #D0E5F5; 
 
    border: 1px solid #79B7E7; 
 
    cursor: pointer; 
 
    border-radius: 3px; 
 
} 
 
.footerButton:hover { 
 
    border-width: 2px; 
 
} 
 
.thead_prop, 
 
.tbody_prop { 
 
    font-family: 'agroverdana'; 
 
    font-size: 13px; 
 
} 
 
#content { 
 
    left: 1px; 
 
    border-top: solid 1px #9BC2E6; 
 
    border-bottom: solid 1px #9BC2E6; 
 
    flex: 1; 
 
} 
 
#navbar { 
 
    padding: 3px 4px 4px 2px 
 
} 
 
#navbutton { 
 
    float: right; 
 
} 
 
#vpad-pesq { 
 
    float: left; 
 
    border: 2px solid #9BC2E6; 
 
    padding: 1px; 
 
} 
 
#searching { 
 
    font-family: 'agroverdana'; 
 
    background-color: #E1F0FD; 
 
    border: 1px solid #C5DBEC; 
 
    border-radius: 3px; 
 
    padding: 2px 1px 0 1px; 
 
} 
 
#searching:hover { 
 
    background-color: #D0E5F5; 
 
    border: 1px solid #79B7E7; 
 
    cursor: pointer; 
 
} 
 
#msgbar { 
 
    border-top: solid 1px #9BC2E6; 
 
    border-bottom: solid 1px #9BC2E6; 
 
    height: 20px; 
 
    background-color: #dae9f6; 
 
} 
 
#footer { 
 
    text-align: right; 
 
    border-top: solid 1px #9BC2E6; 
 
    border-top: 0; 
 
    max-height: 60px; 
 
}

<!DOCTYPE html> 
 
<!--[if lte IE 9]> 
 
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style> 
 
<![endif]--> 
 
<html manifest="wpadco.appcache"> 
 

 
<head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
 
    <title>Central de Controle da Engenharia</title> 
 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"> 
 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 

 

 

 
</head> 
 

 
<body> 
 
    <header style="padding-bottom:5px;text-align:center; font-family:'agroverdana';font-size:14px;">Central de Controle da Engenharia</header> 
 

 
    <section id="content"> 
 
    <header id="navbar"> 
 

 
     <input type="text" id="vpad-pesq" /> 
 
     <select id="searching"> 
 
     <option>Código</option> 
 
     <option>Nome</option> 
 
     </select> 
 

 
     <div id="navbutton"> 
 
     <button id="btfirst"></button> 
 
     <button id="btprev"></button> 
 
     <button id="btnext"></button> 
 
     <button id="btlast"></button> 
 
     </div> 
 

 
    </header> 
 
    </section> 
 

 

 
    <div class="scrollingtable"> 
 
    <div> 
 
     <div> 
 
     <table> 
 
      <thead> 
 
      <tr> 
 
       <th class="thead_prop"> 
 
       <div label="Código"></div> 
 
       </th> 
 
       <th class="thead_prop"> 
 
       <div label="Descrição"></div> 
 
       </th> 
 
       <th class="thead_prop"> 
 
       <div label="Valor1"></div> 
 
       </th> 
 
       <th class="thead_prop"> 
 
       <div label="Valor2"></div> 
 
       </th> 
 
       <th class="thead_prop"> 
 
       <div label="Valor3"></div> 
 
       </th> 
 
       <th class="thead_prop"> 
 
       <div label="Valor4"></div> 
 
       </th> 
 
       <th class="thead_prop"> 
 
       <div label="Valor5"></div> 
 
       </th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      <tr class="tbody_prop"> 
 
       <td>001</td> 
 
       <td>coxa c/sobrecoxa s/ osso s/ pele</td> 
 
       <td>1.00</td> 
 
       <td>5.00</td> 
 
       <td>10.00</td> 
 
       <td>10.00</td> 
 
       <td>5.00</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    <section id="msgbar"></section> 
 
    <footer id="footer"> 
 
     <button class="footerButton">Salvar</button> 
 
     <button class="footerButton">Alterar</button> 
 
     <button class="footerButton">Excluir</button> 
 
     <button class="footerButton">Voltar</button> 
 
    </footer> 
 
    </div> 
 
</body> 
 

 
</html>

Answer 1

我没有真正测试过这些，但理论上这些都是可能的解决方案。

为了不弄乱您在按钮集合上工作的CSS，将一组按钮封装在div中，并将这些类中的一个应用于div。

.footerButtonWrapper { 
    margin: auto; 
    position: absolute; 
    top: 0; bottom: 0; right: 0; 
} 

，并以此为备用（调整行高）

.footerButtonWrapper { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

如果推来推去，只要尾行始终处于高度一致的，你可以尝试使用简单的边缘顶部或填充顶部和“眼球”中心。

Answer 2

我想我不明白你的问题是正确的。你想将按钮向左移动并将其居中置于垂直位置？ 如果您想将页脚中的按钮移动到左侧，请勿使用文本对齐方式：正确。它将您的按钮向右移动。 当您知道页脚高度 - 60px时，您可以使用margin-top：5px将其垂直居中。

这是你的问题的答案？