如何将 CSS 形状内的文本居中

Question

我正在尝试为一些工作制作主页，我想制作一个漂亮的小按钮，上面写着 'Home'。但是，我还没有到实现 onclick 的地步，所以不用担心。我试着做出我想要的形状。

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 25px;
}

<div id = "home">Home</div>

同样，我试图将文本 'Home' 居中放置在形状内部，这样它看起来就像在形状的中间。

Answer 1

不使用高度，只使用行高

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  line-height: 100px;
  text-align: center;
  font-size: 25px;
}

<div id = "home">Home</div>

Answer 2

您可以使用显示 table:

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 25px;
  display: table; 
}
p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;
}

<div id = "home">
  <p>Home</p>
</div>

Answer 3

我认为 flexbox 可能会对您有所帮助，请检查以下代码：

#home{  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

<div id = "home">
  <span>Home</span>
</div>

如果这对你有帮助，请告诉我。

Answer 4

您可以使用 display:flex 方法将文本从顶部和左侧居中。

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 25px;
  display:flex;
  justify-content:center;
  align-items:center;
}

<div id="home">Home</div>

Answer 5

您可以为此使用 line-height，这也可以正常工作。下面是一个例子，希望对你有帮助。

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 25px;
}

<div id = "home">Home</div>

如何将 CSS 形状内的文本居中

How To Center Text Inside Of A CSS Shape

html

css

centering