居中按钮和响应式设计

Question

我有一个关于响应式设计的简单问题。我有一个按钮，我想要在 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>

Answer 1

您可以使用 Transform 属性来做到这一点，只需让元素在 left 中变为 50% 并将其 translate 变为 -50%在 x 轴上表示水平。希望它有效检查片段。并且你不需要指定 position 属性当你去移动屏幕时，除非你不想根据你的 screen-width.[=19 改变它=]

.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>

居中按钮和响应式设计

Centering a button and responsive design

center

button

responsive-design