Question

我正在努力为某些工作制作一个主页，我想制作一个很棒的小按钮，上面写着“家”。但是，我还没有实现onclick，所以不要担心。我尝试制作我想要的形状。

＆＃13;

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

＆＃13;

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

＆＃13;

同样，我正试图将文本集中在“家庭＆＃39;在形状内部看起来好像在它的中间。

Answer 1

不使用高度，只需使用line-height

#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

我认为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 3

您可以使用display:flex方法将文字从上到左居中。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 4

您可以使用 line-height ，这也可以正常使用。这是一个例子，我希望它会对你有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您可以使用显示表：

#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>

如何在CSS形状中居中文本

5 个答案: