时间戳

首页 > 解决方案 > 居中按钮和响应式设计

button - 居中按钮和响应式设计

问题描述

我有一个关于响应式设计的简单问题。我在 PC 屏幕的右上角有一个我想要的按钮，但在移动设备的底部中心。我需要使用@media 还是有其他方法？我试过text-align了，但它似乎不起作用

.boton {
    position: relative;
    left: 80%;
    top:5%;
    font-family: 'Raleway', sans-serif;
    font-size: 100%;
    padding-right: 2%;
    padding-left: 2%;
    cursor: pointer;
    
    @media screen and (max-width: 360px) {
    .boton {
    position:relative;
    text-align:center;
    }
<a href="mymail0@gmail.com">
        <button class="boton">Contact Me</button>
    </a>

标签： buttonresponsive-designcenter

解决方案

您可以使用Transform属性来做到这一点，只需让元素进入50%并且left它translate在-50%x 轴上意味着水平。希望它可以查看片段。并且您在进入移动屏幕时不需要指定 positioni属性，除非您不想根据您的screen-width.

.boton {
  position: relative;
  left: 80%;
  top:5%;
  font-family: 'Raleway', sans-serif;
  font-size: 100%;
  padding-right: 2%;
  padding-left: 2%;
  cursor: pointer;
}

@media screen and (max-width: 360px) {
.boton {
  text-align:center;
  left : 50%;
  transform : translateX(-50%);
 }
}
<a href="mymail0@gmail.com">
        <button class="boton">Contact Me</button>
    </a>

推荐阅读