html - 更改自定义按钮的宽度

Question

我想将自定义 button 居中，但似乎找不到解决方案。

我可以对齐它，但我不知道如何使 border 变小并且不占用 h1 的整个 width文本

HTML:

#button {
  color: #6E4E34;
  font-size: 30px;
  text-decoration: none;
  border: solid 2px #6E4E34;
  border-radius: 5px;
  padding: 10px;
  font-family: "PT Sans", sans-serif;
  display: flex;
  justify-content: center;
}

<div id="ImageMain">
  <div id="TextMain">
    <h1>Shop our Whole Selection</h1>
    <a href="#" id="button">Browse</a>
  </div>
</div>

Answer 1

你的意思是这样的？

设置#textMain为

align-items: center;
display: flex;
flex-direction: column;
justify-content: center;

片段

#TextMain {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#button {
  color: #6E4E34;
  font-size: 30px;
  text-decoration: none;
  border: solid 2px #6E4E34;
  border-radius: 5px;
  padding: 10px;
  font-family: "PT Sans", sans-serif;
}

<div id="ImageMain">
  <div id="TextMain">

    <h1>Shop our Whole Selection</h1>
    <a href="#" id="button">Browse</a>

  </div>
</div>