语义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){}