Question 173854 in Html Question posted in
Some basic documentation can be found here.

Html – why my_text is getting moved down?

nav {
  height: 10em;
}

.some_text {
  top: 50%;
  left: 40%;
  position: relative;
}
<nav>
  <a class="some_text">ABC</a>
</nav>

as per https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#percentages

Since nav parent is body which has no property defined, shouldn’t nav also default to undeterministic properties meaning values which browser cannot use , and not move some_text down the browser?

Tags:

2

Answers


  1. 0

    It’s because you have given a height of 50em to your nav element. Try removing that.

    Login or Signup to reply.
  2. 0

    At present, at least two reasons can be foreseeable:

    1. block height is too high (CSS → height: 50em);
    2. The text is positioned from the middle of the block horizontally (CSS → top: 50%).

    Solutions/Hints:

    1. Try decreasing one of those values (or both).
    2. Try to add to the CSS code border: 1px solid #0ff; under the line height: 50em; for clarity.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search