如何在容器的底部中心放置一个div

Question

我知道有很多这样的问题，但是没有任何办法使div保持在容器的中心和底部。我尝试了这种方法：

.element-to-stick-to-bottom {
position: absolute;
bottom: 0;
}

.container-element {
position: relative;
}

这给了我这个结果：

IDK是什么原因，并且我不能使用margin-left: 10%;，因为按钮的长度不同。我也不能为每个按钮使用不同的值，因为这会在监视器大小之间改变。除了使用position: absolute;之外，我还需要一种解决方案-因为某些原因，当我在div上使用此位置时-它们向右移动，有点像text-align: left，但“起点”是从中间开始的。

我已经审查了我的代码a 1000次（包括母版页），但找不到任何错误。无论如何，这是CSS：

table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 40px;
        text-align: center;
    }
    table {
        margin: 0;
        background-color: #f0f0f0;
        overflow: auto;
    }    
    #services_table {
    table-layout: fixed;
    }

    #services_table td {
       /* height: 20px; */
        overflow: hidden;
        width: 25%;
    }
    .container{
        width: 100%;
        height: 490px;
        border: 1px solid #000;
        /*position: relative;*/
    }
    #logo_container{
        height: 150px;
    }
    .button{
        width: auto;
        height: 34px;
        border: 1px solid #000;
        border-radius: 180px;
        text-decoration: none;
          font-family: 'typo_light';
          font-size: 28px;
          display: inline-block;
          padding-left: 20px;
          padding-right: 20px;
          background-color: #f45e61;
          /*position: absolute;*/ /*causes the element to not be centered, ffs. needs fixing.*/
          /*bottom: 0;*/ /*doesnt work as intended*/
          position: absolute;
          /*bottom: 0;*/
    }
    #PLUS{
        margin-right: 5px;
        margin-left: -20px;
        display: inline-block;
        width: 11%;
        height: 34px;
        border-radius: 180px;
        background-color: blue;
    }
    #LOGO_BUTTON{
        margin-left: 0px;
        padding-left: 20px;
        padding-right: 40px;
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        /*margin-left: -8.3%;*/
    }
    #ONLY_TEXT{
        margin-left: -6px;
    }
    .description{
        text-decoration: none;
          font-family: 'typo_thin';
          font-size: 50px;
    }
    .inside_container{
        padding: 30px;
    }
    .dot {
      font-family: 'ormont';
    }

和HTML：

<form id="form1" runat="server">
        <table style="width:100%;" id="services_table">
  <tr>
    <td><center><div class="container"><div class="inside_container"><span class="description">We offer to "enhance" an already existing website<span class="dot">.</span><br>We will redesign your website, add JS, and some pazzaz<span class="dot">.</span><br>Do you already have a website that you feel like needs renovating?<br>Contact us<span class="dot">.</span><br></span><div class="button" id="enhance_button">enhance en existing site</div></div></div></center></td>
    <td><center><div class="container"><div class="button" id="design_button">design by request - from scratch</div></div></center></td>
  </tr>
  <tr>
    <td valign="bottom"><center><div class="container"><div class="button" id="specific_button">build a specific feature</div></div></center></td>
    <td><center><div class="container"><div class="button" id="build_button">build an entire site with database from scratch</div></div></center></td>
  </tr>
  <tr>
  <th colspan="2"><center><div class="container" id="logo_container"><div class="button" id="LOGO_BUTTON"><span id="PLUS">+</span><span id="ONLY_TEXT"> added money: design a logo</span></div></div></center></th>
  </tr>
</table>
    </form>

Answer 1

也许这可能行得通。尝试分配元素的ID。您的代码可能是

<the element class="element-to-stick-to-bottom">

您可以将其更改为

<the element class="element-to-stick-to-bottom">

如果提供html代码，那就更好了