Top calculation on scss

Asked

Viewed 59 times

0

I have a container that has a variable height, depending on the computer resolution.

I need to calculate when top should use so that the content is centralized.

I tried something like:

.container {
  height: auto;
  position: relative;
  top: calc(((100% - height) / 2));
}

But it didn’t work. Someone knows how to do this kind of calculation on the scss?

html scss

  • Your lime has a pair of () more... It should be appended Calc((100% - height) / 2). Anyway I don’t know if this will solve. I actually believe that this is not the best way to align an element vertically....

  • Sorry, but I couldn’t quite understand what you intend to do. You want a size of height variable so that the content inside it does not come out is this ? Just delete the height. There’s no need for it. But now if you need a specific value, you can go put the amount of pixels until you have the result you want. If you want to have a top space, inside your container, you can use only one Padding-top: Number of pixels;

  • Here is more than 20 answers of how to do this alignment, some of them should serve you https://answall.com/questions/2817/qual-best-forma-de-centralizar-um-elemento-vertical-horizontally

  • The transform: translateY(-50%) with top: 50% maybe I can solve.

  • https://stackoverflow.com/questions/39190922/how-to-calculate-with-scss-variables-from-function

2 answers

0

For you to use Calc(), you should always know the size of the things you insert, not only put height inside calc(), that it will not return the value for the calculation.

He must also be with position in absolute, Otherwise, the element will be out of alignment. In this example, when determining values for width and height, I worked with half the values for alignment:

.container {
  background-color: lime;
  height: 100px;
  width: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}
<div class="container">teste</div>

Another option, in my view easier, is to use the translate(-50%,-50%), in which you can freely determine the size of the element you want, which it will do the alignment automatically:

.container {
  position:absolute;
  top:50%;
  left:50%;
  width:100px;
  height:100px;
  transform: translate(-50%,-50%);
  background:tomato;
}
<div class="container">teste</div>

-1

To align vertically I always use:

display: block;
margin-left: auto;
margin-right: auto;

Now for you to calculate the top depending on the solution of a monitor maybe using only a top with percentage would be enough. If not, sorry is all I know.

Browser other questions tagged html scss

You are not signed in. Login or sign up in order to post.