Question

我的项目使用20行x 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

我将您的代码复制到jsfiddle并放在下面。它在Stack Overflow和jsfiddle上运行良好。您的浏览器可能不支持一行代码，从而导致代码无法正常工作。建议您更新浏览器，或切换到其他浏览器。

希望这会有所帮助！

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

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

同时删除按钮和输入的样式

将它们包装在div中。

将按钮css样式添加到div中。按钮示例CSS-

static void Main(string[] args)  
{  
    if (Environment.UserInteractive)  
    {  
        MyNewService service1 = new MyNewService(args);  
        service1.TestStartupAndStop(args);  
    }  
    else  
    {  
        // Put the body of your old Main method here.  
    }  
}

Answer 3

这是我解决此问题的方法：

<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);
}

这是一个文件选择按钮，因此其处理方式与其他按钮不同，但是我还不知道该怎么做。收到答案后，我会发布答案。如果其他人知道，请告诉我们。

感谢那些回答。

在flex容器中居中的按钮太窄

3 个答案: