Как я могу динамически центрировать текст внутри кнопки при изменении ее размера?

Question

Когда я изменяю размер области просмотра, текст моей кнопки начинает покидать область кнопки. Если я добавлю display: flex, justify-content: center, а также align-items: center, тогда вся кнопка будет смещена и не соответствует списку.

.textList{
  margin-top:2vh;
  margin-bottom:2vh;
  background: linear-gradient(to left, #743ad5, #d53a9d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size:2vh;
  font-weight:700;
}
.btn{
  text-decoration:none;
  width:4.5vw;
  height:3.5vh;
  background: linear-gradient(to left, #743ad5, #d53a9d);
    -webkit-text-fill-color: white;

  color:white;
  font-family: 'Lato', sans-serif;
  border-radius:1vw;
  font-weight:700;
  font-size:1.75vh;
  position:absolute;
  right:0;
  vertical-align:middle;
  text-align:center;
  

}
#listArea{
  position:absolute;
  top: 25vh;
  width:25vw;
  height:35vh;
  border-style:solid;
  border-width:0.75vw;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  border-image-slice:3;
  background:white;
  font-size:2vh;
}

<div id="listArea">
  <ul id="divArea">
    <li class="textList">
      <input class="editField">
      <button class="btn">Delete</button>
      <button class="edit">Edit</button>
    </li>
  </ul>
</div>

Вот ссылка на проект: https://todolist.ibrahimshah.repl.co/

Answer 1

Когда я изменяю размер области просмотра, текст моей кнопки начинает покидать область кнопки.

Вы уже центрируете текст внутри кнопки с помощью text-align:center. Текст, выходящий за границу кнопки, не является проблемой центрирования, это проблема переполнения. Как я всегда говорю, вы не можете налить 10 галлонов воды в ведро на 5 галлонов. Вы должны добавить min-width к вашей кнопке, чтобы она никогда не становилась меньше, чем ее содержимое. Вам также следует подумать о добавлении min-width к #listArea, чтобы предотвратить переполнение поля li и его содержимым.

.textList{
  margin-top:2vh;
  margin-bottom:2vh;
  background: linear-gradient(to left, #743ad5, #d53a9d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size:2vh;
  font-weight:700;
}
.btn{
  text-decoration:none;
  width:4.5vw;
  min-width:50px; /* <-- Don't let the button get too small */
  height:3.5vh;
  background: linear-gradient(to left, #743ad5, #d53a9d);
    -webkit-text-fill-color: white;

  color:white;
  font-family: 'Lato', sans-serif;
  border-radius:1vw;
  font-weight:700;
  font-size:1.75vh;
  position:absolute;
  right:0;
  vertical-align:middle;
  text-align:center;
}
#listArea{
  position:absolute;
  top: 25vh;
  width:25vw;
  height:35vh;
  border-style:solid;
  border-width:0.75vw;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  border-image-slice:3;
  background:white;
  font-size:2vh;
}

<div id="listArea">
  <ul id="divArea">
    <li class="textList">
      <input class="editField">
      <button class="btn">Delete</button>
      <button class="edit">Edit</button>
    </li>
  </ul>
</div>

Answer 2

Есть несколько способов сделать это, стандартным способом было бы использовать text-align: center; но это работает только по горизонтальной оси, если вы хотите центрировать текст как по горизонтали, так и по вертикали независимо от размера и формы кнопки, вы можете использовать гибкое позиционирование, как показано в примере кнопки 2.

Примеры:

.btn {background:#ff0000;color:white;font-size:20px;padding:8px 32px;width:100%;text-align:center;margin:20px auto;max-width:600px;height:10vh;}

.btn2 {background:#ff0000;color:white;font-size:20px;padding:8px 32px;width:100%;display:flex;justify-content:center;align-items:center;margin:20px auto;max-width:600px;height:10vh}

<div class="btn">View More</div>

<div class="btn2">View More</div>