如何将文本放在我的div中心？

Question

如何让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>

Answer 1

尝试将此添加到您的css

.toolnav {

text-align:center;

}

这会使您的文字位置居中。

Answer 2

将$key = title添加到主div。

line-height: 50px;

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