Html centerメディア画面のボタンを中央に合わせる

Question

メディア画面でLäs merという青色の列に分割された同じ行に、このボタンを水平に整列させます。リンク http://www.visbyhemtjanst.se/

がされ、次の私は、次のメディアクエリーを追加しました：

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

私はメディアクエリで多くを追加する必要があるものと同じ行に整列しない画面ボタンを減らす

。

Answer 1

3つの列は、（私が見ることができるように）同じ高さを持っているのに役立ちます。あなたのボタンが列の下にとどまるようにする必要があります。列に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>

Answer 2

あなたは要素を中央にしたい場合は

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

このクラスを追加するには希望これは