3

How do I get the the texts in the div id="tools" to be centered an evenly spaced in the div I created to be a nav bar?

Here is my CSS and HTML is the second

#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>
Yanis Zennia
  • 31
  • 2

2 Answers2

0

try add this to your css 

.toolnav {

text-align:center;

}

This will make your text position in center.

Fiido93
  • 1,918
  • 1
  • 15
  • 22
0

Add line-height: 50px; to your main 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>
vanburen
  • 21,502
  • 7
  • 28
  • 41
  • Thanks that helped. Now do you know how I can make the each div of text spaced equally? Also I edited the HTML and CSS so take a look at what I have please. – Yanis Zennia Aug 17 '15 at 01:52
  • Yes, but since you're question has been marked as a duplicate you should rewrite it to take into consideration the equal spacing aspect. – vanburen Aug 17 '15 at 02:01