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中心对齐媒体屏幕上的按钮

回答

相关问题