Question

我希望将按钮水平对齐在同一行中，该行在媒体屏幕中分为蓝色，称为Läs mer。以下是链接 http://www.visbyhemtjanst.se/

我添加了以下媒体查询：

@media only screen and (max-width: 1450px) {
    .home-page-content{
     min-height: 260px;
    }
}

当我缩小屏幕按钮时，它不会在同一行中对齐，需要在媒体查询中添加更多内容。

Answer 1

如果您想将元素居中，请添加此类

.center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:50%;   /*  Adjust this to place it correctly use percentage*/
}

希望这有帮助

Answer 2

三列（我可以看到）具有相同的高度。所以你需要你的按钮留在列的底部。只需将position:relative添加到列，将position:absolute;添加到buttons。请参阅下面的代码（您可能需要稍微更改一下）

另请参阅下面的代码段（我从您的网站复制了您的代码）

#top .flex_column_table_cell {
    position:relative;
}
.avia-button-center {
    position:absolute;
    bottom:0;
    left:0;
    margin:0 auto;
    right:0;
    text-align:center;
 }

#top .flex_column_table {
    display: table;
    table-layout: fixed;
    width: 100%;
}
#top .flex_column_table_cell {
    float: none;
    display: table-cell;
  padding-bottom:30px;
  }



#top .flex_column_table_cell {
    position:relative;
}
.avia-button-center {
    position:absolute;
    bottom:0;
    left:0;
    margin:0 auto;
    right:0;
    text-align:center;
  }

<div id="top">
<div class="flex_column_table">
  <div class="flex_column_table_cell">
    
    <h2>Hemtjänst</h2>

     Om du har ett behov att få hjälp med städ, tvätt, personlig omvårdnad eller    ledsagning kan du via Region Gotlands socialförvaltning ansöka om hemtjänst.
Vi är ett privat hemtjänstalternativ  och jobbar på uppdrag av Region Gotland och om du vill anlita oss så planerar vi in ett möte för att planera din hemtjänst.
    <div class="avia-button-center"><a href="#">LAS MER</a></div>
    </div>
  <div class="flex_column_table_cell">
    
    <h2>Personlig assistans</h2>

För dig som har personlig assistans hjälper vi dig med den. Vi rekryterar och tillsätter de assistenter som du själv väljer.

Vi lägger upp din assistans helt utifrån dina villkor. Hör av dig så berättar vi mer vad vi kan erbjuda.
    <div class="avia-button-center"><a href="#">LAS MER</a></div>
    </div>
  <div class="flex_column_table_cell">
    
    <h2>Hushållsnära tjänster</h2>

Vi erbjuder hjälp med hushållsnära tjänster till alla. Oavsett om du har hemtjänst eller inte.

Vi tar hand om det ditt hem så får du tid över till annat.  Genom så kallad RUT avdrag kan du få upp till 50% av kostnaden subventionerad.
    <div class="avia-button-center"><a href="#">LAS MER</a></div>
    </div>
  
  </div>
  </div>

Html中心对齐媒体屏幕上的按钮

2 个答案: