Кнопка в центре гибкого контейнера слишком узкая

Question

В моем проекте используется сетка CSS размером 20 на 20 столбцов (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.

Добавьте стили CSS кнопки в div.Пример кнопки 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 2

Вот как я решил это:

<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 и добавил класс 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);
}

Это кнопка выбора файла, поэтому она обрабатываетсяв отличие от других кнопок, но я пока не знаю, как это сделать.Я отправлю ответ на этот вопрос, когда он у меня будет.Если кто-то еще знает, пожалуйста, дайте нам знать.

Спасибо тем, кто ответил.

Answer 3

Я скопировал ваш код в jsfiddle , и у меня есть его ниже.Отлично работает на переполнении стека и 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>