CODEWITHSUNDEEP
htmlcss
Tasos.P
Tasos.P

Reputation: 9

How to move text using CSS?

I am trying to move the navigation bar to the top right. I tried to do it using padding. Padding-right,top,left works but padding-bottom doesn't work. I also tried using float:right; but it doesn't display in the exact position that I would like. What am i doing wrong?

.nav1 a {
  padding-right: 10px;
  padding-bottom: 50px;
  text-decoration: none;
}
<nav class="nav1">
  <a href="./Index.html">HOME</a>
  <a href="./About_Me.html">ABOUT ME</a>
  <a href="./Contact.html">CONTACT</a>
</nav>

Upvotes: 0

Views: 82

Answers (2)

doğukan
doğukan

Reputation: 27569

search flex and justify-content

.nav1 {
  background:aqua;
  display:flex;
  justify-content:flex-end;
}

.nav1 a {
    padding-right: 10px;
    padding-bottom: 50px;
    text-decoration: none;
}
<nav class="nav1">
      <a href="./Index.html">HOME</a>
      <a href="./About_Me.html">ABOUT ME</a>
      <a href="./Contact.html">CONTACT</a>
</nav>

if you want a centered look.

.nav1 {
  background:aqua;
  display:flex;
  justify-content:flex-end;
  height:50px;
}

.nav1 a {
    padding-right: 10px;
    line-height:50px;
    text-decoration: none;
}
<nav class="nav1">
      <a href="./Index.html">HOME</a>
      <a href="./About_Me.html">ABOUT ME</a>
      <a href="./Contact.html">CONTACT</a>
</nav>

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28593

You can resolve this by adding a text-align property to the nav css. See snippet:

nav {
  text-align: right;
}

.nav1 a {
  padding: 10px;
  text-decoration: none;
}
<nav class="nav1">
  <a href="./Index.html">HOME</a>
  <a href="./About_Me.html">ABOUT ME</a>
  <a href="./Contact.html">CONTACT</a>
</nav>

Upvotes: 1

Related Questions