Button centered in flex container is too narrow

Question

My project uses a 20 row by 20 column css grid layout (5% of screen for each cell). One of the pages has a button. Originally the page was contained within grid columns 5-8 and grid rows 6-9, and there was no problem with the button itself, but I need to center it within the grid area, so I used flexbox for centering within the css grid.

The button text is "Select file to upload" but problem is that the button is now only the width of a single word; I want the button to be as wide as all four words. Before I added a flex container for centering the button was as wide as all four words but now with the flex container it's not.

The flexbox arrangement works perfectly for all other elements on the page and two other pages, but this button has that problem (on Firefox 64). I may need to use a unique flex-item class for it, different from the flex-item class shown below.

Here are the css classes that apply to this button:

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

Here is the html for this button:

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

I know this is not a complete reproducible example but as this is specific to button styling, I hoped it could be answered with the code above.

Thanks for any help.

Answer 1

Here's how I solved this:

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

As posted in my original question, this html code wrapped the button in two divs. I changed to a single div and added the upload-btn-wrapper class to the single div. I also changed width in the .btn class to 65%.

That leaves only one problem to resolve: the btn class has a hover selector, but the button text is not highlighted on hover:

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

This is a file selection button so it's handled differently from other buttons, but I don't know how to do it yet. I'll post the answer to that one when I have it. If anyone else knows, please let us know.

Thanks to those who answered.

Answer 2

Remove styles for both button and input

wrap them in a div.

Add the button css styles to the div. Example button CSS -

.divButton {
  background-color: cyan;
  border: none;
  color: white;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Answer 3

I copied your code to a jsfiddle and have it below. It works fine on Stack Overflow and jsfiddle. It could your browser not supporting a line of code, causing the code to not work properly. I suggest updating your browser, or switching to a different browser.

Hope this helps!

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