Perfect centralization of elements using Transform:Translate <style>

Asked

Viewed 571 times

3

On another question I asked before, a user gave me an example of how I could perfectly centralize an html button on the screen.

It was in this question: How to position a button anywhere on the screen, in html

He simply did:

#centralizar{
    position:absolute; 
    top:50%;
    left:50%;
    transform: translate(-50%, -50%)
}

Only I tried to center three buttons below, starting from the same pattern, but it doesn’t work...

From what I saw in doc, Translate changes the position of an object on the screen from the multiplication of the object’s position matrix by a vector. In this case, I need to have the pixel position information in order to do this calculation, and have an idea of what the Translate value is, right? Or there’s an easier way.

Just follow my code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #centralizado1 {position:absolute; top=46%; left=50%; transform:translate(-46%, -50%)}
    #centralizado2 {position:absolute; top=50%; left=50%; transform:translate(-50%, -50%)}
    #centralizado3 {position:absolute; top=54%; left=50%; transform:translate(-54%, -50%)}  
</style> 

<body>

<div id="centralizado1">
       <button >A</button>
</div>

<div id="centralizado2">
     <button>B</button>
</div>

<div id="centralizado3">
       <button>C</button
</div>

</body>
</html>
html css
  • 4

    You invented a "=" in the statement that doesn’t exist. Read the existing documentation and examples in bulk - We are here to ask questions, but it is good to at least read the documentation, without trying "on the kick" and already ask.

  • I didn’t notice that. I was using two examples, and I didn’t notice the "equally instructive".

  • Take advantage and add a size in an external div, to better see the effect. If you can solve it, you can publish the solution in the field below, so you can close the question. I even thought about posting an answer with the corrected code, but I’m not sure how the intended result is. An example of what you want (in image, for example, or a description of the result) would help.

  • Another problem appeared. Bou edit the question

  • I published a more simplified basic model as a starting point.

2 answers

6


Here are some corrections and simplifications, in "order of appearance":

  • Removed the syntax error from the original question, it had a = remaining in the statements;
  • Added width, height, and removed the edges of the body and html for the page to occupy the visible area;
  • Added relative at the body to accommodate the base for the absolute children (actually, this is important when it comes to div inside div;
  • Centralized only one div, already with the 3 buttons;
  • Closed the tag <head>;
  • Simplified div containing buttons;

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body, html {
        padding:0;
        margin:0;
        width:100%;
        height:100%;
        position:relative;
      }
      #centralizado {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
      }
  </style> 
  </head>
  <body>
    <div id="centralizado">
      <button>A</button>
      <button>B</button>
      <button>C</button>
    </div>
  </body>
</html>

  • Got it. But if you passed to the three buttons the same coordinates of the screen, as they were not superimposed?

  • 1

    I passed coordinates to div who is outside of them. They "settle" inside this div. Thinking differently: you do not want to position EACH button, but a set of them. For this, a div around. - Try increasing or decreasing the number of buttons, for example by putting 9 buttons with a <br> every 3 of them and you’ll see that it always centers - and center on the 100% I put on the body

  • Ah, of course. Then by default, the div will "insert" the elements contained in it from left to right?

  • 1

    In Western languages it is left to right, but if you break with <br> it will remain centralized. It became an "elastic box" as we did

  • 1

    A good exercise is you start from pure HTML, and go putting every CSS rule I put to see the isolated effect of each one

0

It is not possible to use more than one id in an element, and by definition, an ID should not repeat itself in more and an element in every HTML document, it should be a unique identifier for that element.

To get this result, you can use the classes (attribute class), where it is permitted to use more than one class in an element and to reuse the class in more than one element.

Following his example:

.centralizado1 {
  position:absolute;
  top: 46%;
  left: 50%;
  transform: translate(-46%, -50%)
}
.centralizado2 {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%)
}
.centralizado3 {
  position:absolute;
  top: 54%;
  left: 50%;
  transform: translate(-54%, -10%)
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="centralizado1 centralizado2">
   <button>A</button>
  </div>
  <div class="centralizado2 centralizado3">
    <button>B</button>
  </div>
  <div class="centralizado3 centralizado2 centralizado1">
    <button>C</button>
  </div>
  <div class="centralizado3">
    <button>C</button>
  </div>
</body>
</html>

Browser other questions tagged html css

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