如何在调整大小时动态地将按钮内的文本居中？

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;但这仅适用于水平轴，如果您想使文本水平和垂直居中，无论按钮大小和形状如何，都可以使用 flex 定位，如按钮示例 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>