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

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>

这里是项目的link：https://todolist.ibrahimshah.repl.co/

Answer 1

When I resize the viewport, my button's text begins to leave the area of the button.

您已经使用 text-align:center 将按钮中的文本居中。离开按钮边界的文本不是居中问题，而是溢出问题。正如我常说的，5 加仑的水桶不能装 10 加仑的水。您应该向您的按钮添加一个 min-width，这样它就永远不会小于其内容。您还应该考虑在 #listArea 中添加一个 min-width 以防止 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>

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

How can I dynamically center the text inside of a button as it gets resized?

html

javascript

css

frontend

responsive-design

示例：