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属性来执行此操作，只需在50%中将元素移至left并将其translate移至x轴上的-50%意味着水平。希望它能检查出摘要。而且，除非您不想按照i进行更改，否则无需在移动屏幕上指定pos screen-width tion属性。

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

居中按钮和响应式设计

1 个答案: