Html中心對齊媒體屏幕上的按鈕

-2

我想在同一行中水平對齊按鈕，在媒體屏幕中將該按鈕劃分爲藍色的列，名稱爲Läs mer。以下是鏈接 http://www.visbyhemtjanst.se/Html中心對齊媒體屏幕上的按鈕

我增加了以下媒體查詢：

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

當我降低屏幕按鈕有什麼需要添加更多的媒體查詢同一行不對齊。

來源

2016-09-20 Rashmi S

的三列（我可以看到）具有相同的高度。所以你需要你的按鈕留在列的底部。只需將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>

來源

2016-09-20 10:51:56

，如果你想中心的元素添加此類

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

希望這有助於

來源

2016-09-20 10:37:54

Html中心對齊媒體屏幕上的按鈕

回答

相關問題