Question

Mobile screen - width: 640px 这是来自宽度为640px的屏幕。在大于此的屏幕中，按钮中的文本（例如“添加新”）水平居中。我希望有人可以看看SCSS和html.slim，并告诉我如何解决这个问题。

SCSS：

.card {
  @extend .col-sm-12, .col-md-12;
  background-color: rgba(0,0,0,0.2);
  border-width: 2px;

  a.btn {
    display: block;
    @extend .btn-sm, .btn-dark, .px-3;
    width:90px;
    max-width:100%;
    border-radius: 20px;
    float: right;
    margin: 3px -20px 3px -15px;
    text-shadow: none;
    opacity: 0.85;
    text-align: center;
    @media (max-width: 640px) {
      width: 37%;
      margin: 5px -35px 3px -15px;
      font-size: 100%;
    }
  }

html.slim：

.card
  .card-header
    h4=title
    a.btn href="#" Add New
  .card-body
    article
      strong Section Heading
      p.card-text Card Text Goes Here
      hr
    article
      strong Section Heading
      p.card-text Card Text Goes Here
      a.btn href="#" Click Here!

正如您所看到的，我已经拥有text-align: center但是当我将宽度设置为宽度等于或小于640px的屏幕的宽度为37％时，它似乎不起作用（请参阅下面的内容{ {1}}）。在尝试不同的数字后，我想出了宽度为37％的数字。任何大于该数字的按钮都会使按钮与卡片左侧的文本（容器）重叠，任何小于此值的内容都会使文本不适合按钮。

作为参考，我还附上了屏幕大得多（例如iPhone X）时按钮的外观截图，这也是我希望按钮在较小的屏幕上看的方式;按钮留在容器中，文本适合并水平和垂直放置在按钮内。

Mobile screen - width bigger than 640px

提前致谢！

SCSS - 按钮中的文本不会水平居中（文本对齐：中心不起作用）

0 个答案: