html - 位于 flex 容器中心的按钮太窄

Question

我的元素使用 20 行 20 列的 css 网格布局(每个单元格占屏幕的 5%)。其中一个页面有一个按钮。最初该页面包含在网格第 5-8 列和网格第 6-9 行中，按钮本身没有问题，但我需要将其居中放置在网格区域内，因此我使用 flexbox 在 css 网格中居中。

按钮文本是“选择要上传的文件”，但问题是按钮现在只有一个字的宽度；我希望按钮与所有四个字一样宽。在我添加一个用于居中的 flex 容器之前，按钮与所有四个字一样宽，但现在有了 flex 容器就不是了。

flexbox 布局对于页面上的所有其他元素和其他两个页面非常有效，但是这个按钮有这个问题(在 Firefox 64 上)。我可能需要为它使用一个独特的 flex-item 类，不同于下面显示的 flex-item 类。

以下是适用于此按钮的 css 类:

.center_text_grid {
    display: grid;
    grid-column: 5 / 12;
    grid-row: 6 / 19;
    display: block;
    overflow: auto;
    align-items: center;
    justify-items: center;
}

.flex-item {
  display: flex;
  width: 70%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.upload-btn-wrapper {
  display: inline-block;
  text-align:center;
  border-radius: 15px;
}

.btn {
  border: 1px solid rgb(117,163,126);
  background-color: black;
  width: 75%;
  padding: 8px 20px;
  border-radius: 15px;
  font-size: 20px;
  font-weight: bold;
  font-family: CamphorW01-Thin, sans-serif;
  font-size: 13pt;
  color: rgb(117,163,126);
  cursor: pointer;
}

这是此按钮的 html:

<div class="center_text_grid flex-item">
  <div class="upload-btn-wrapper">
  <button class="btn" style="width: 100%">Select file to upload</button>
  <input type="file" name="fileToUpload" />
</div></div><br><br>

我知道这不是一个完整的可重现示例，但由于这是特定于按钮样式的，我希望它可以用上面的代码来回答。

感谢您的帮助。

Answer 1

我是这样解决的:

<div class="upload-btn-wrapper center_text_grid flex-item">
  <button class="btn">Select file to translate</button>
  <input type="file" name="fileToUpload" />
</div><br><br>

正如我在最初的问题中所发布的那样，这段 html 代码将按钮包裹在两个 div 中。我改为单个 div，并将 upload-btn-wrapper 类添加到单个 div。我还将 .btn 类中的宽度更改为 65%。

只剩下一个问题需要解决:btn 类有一个悬停选择器，但是按钮文本在悬停时没有突出显示:

.btn:hover{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
    box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
    color: rgb(175,222,162);
}

这是一个文件选择按钮，所以它的处理方式与其他按钮不同，但我还不知道该怎么做。当我有答案时，我会发布那个答案。如果有其他人知道，请告诉我们。

感谢回答的人。