如何使我的 div 中的文本居中？ [复制]答案

【问题标题】：How do I center the text in my div? [duplicate]如何使我的 div 中的文本居中？ [复制]
【发布时间】：2015-08-17 09:46:20
【问题描述】：

如何让 div id="tools" 中的文本在我创建为导航栏的 div 中均匀分布？

这是我的 CSS，HTML 是第二个

#learn {
  display: inline;
  background-color: white;
  font-size: 1.1em;
}
#sign {
  display: inline;
  background-color: white;
  font-size: 1.1em;
}
#find {
  display: inline;
  background-color: white;
  font-size: 1.1em;
}
#about {
  display: inline;
  background-color: white;
  font-size: 1.1em;
}
.toolnav {
  height: 50px;
  width: 1000px;
  background-color: white;
  border: 2px deepskyblue solid;
  border-radius: 15px;
  margin: auto;
  line-height: 50px;
  text-align:center;
}

<div class="toolnav">
  <div id="learn">Learn More</div>
  <div id="sign">Sign Up</div>
  <div id="find">Find a Task</div>
  <div id="about">About Yanoe</div>
</div>

【问题讨论】：

看看弹性盒子。 ids 也必须是唯一的。

标签： html css centering

【解决方案1】：

尝试将其添加到您的 css 中

.toolnav {

text-align:center;

}

这将使您的文本位置居中。

【讨论】：

【解决方案2】：

将line-height: 50px; 添加到您的主 div。

#tools {
  display: inline;
  background-color: white;
  font-size: 1.1em;
}
.toolnav {
  height: 50px;
  line-height: 50px;
  width: 1000px;
  background-color: white;
  border: 2px deepskyblue solid;
  border-radius: 15px;
  margin: auto;
  margin-top: 100px;
  text-align: center;
}

<div class="toolnav">
  <div id="tools">Learn More</div>
  <div id="tools">Sign Up</div>
  <div id="tools">Find a Task</div>
  <div id="tools">About Yanoe</div>
</div>

【讨论】：

感谢您的帮助。现在您知道如何使文本的每个 div 间隔相等了吗？我还编辑了 HTML 和 CSS，所以请看看我有什么。
是的，但是由于您的问题已被标记为重复，您应该重写它以考虑等间距方面。