javascript - 语义 ui 中心对齐按钮

Question

我使用语义 UI 为我的网站设计了一个注册框。我为图像使用了语义 ui 卡，它是居中对齐的。然后我将“上传照片”按钮放在图像下方(不是流畅的，因为我需要在移动时将按钮调整为图像的宽度)。我手动为按钮指定了宽度并将其居中。现在看起来不错。问题是手机版。它在移动时不会缩放到图像大小，因为它是固定宽度。

这是我的代码

<button className="fluid ui large red button upload-btn">Upload a Photo</button>

.driver-upload-btn{
  width: 30.4%;
  margin: 0 auto;
  margin-top: 12px;
}

我需要媒体查询吗？我被困在这里

Answer 1

你可以试试这个，

@media screen and (min-width: 320px){

  .driver-upload-btn{
     width: 10.4%; //set width as whatever u want
  }

}

// Media query list

@media screen and (min-width: 1024px){}
@media screen and (min-width: 768px){}
@media screen and (min-width: 640px){}
@media screen and (min-width: 480px){}
@media screen and (min-width: 320px){}