CSS problem at different height two buttons

Good, the problem you have in the top property of the ids pay and back, this property is the distance between the upper border that contains it and the same element.

There should be something like that

#pagar {
    position: relative;
    left: 180px;
    top: 1em;
}

#atras {
    position: relative;
    left: -200px;
    top: 1em;
}

Hi, how are you? Happy New Year! Your code still shows php code and not the generated html, you should use the html / css / js fragment option so that the help you get from us is the most ideal for your case. Anyway, the answer of @ IsmaelCarvajal would be the optimal, although the truth is that by reviewing the dynamic html that you generate, you misuse many labels and I presume that you do not have very clear many bases of css, I will try to summarize of placing you a solution that will work for many cases and I will indicate below some errors in your code that I suggest you modify.

Match both buttons in height

You use position relative, but do not establish on which ancestor html or label is taking reference to each button for its relative position , so I suggest you place position relative to the form or group both buttons in a div and this you put this property , because otherwise it will take as reference the own window or the initial position of these elements and in many cases will be deformed. Of rest, what Ismael suggests to you, of matching their top positions will help, although in your case I think you would better place a top: -6em in both.

Having said that and that will surely work in your case, the truth is that it is not the best we can recommend, since the layout you use contains a lot of surplus code, obsolete labels or online styles, so you I recommend rather doing the following:

• It is good practice to place all elements in a class or multiclass and not use many ids or at least not unnecessarily. The divs allow reuse, which, if we speak of efficient and non-repetitive code, is the best, whereas IDs are when an element is necessarily only used once in the whole document.

• Do not use the center tag, it is obsolete for a long time and although most current browsers recognize it, who will know until when. Replace it with a class called "centertext", "centerblock" or "centerboth" and unless you use flexbox, grids or floats will serve you for the same in any context, you just have to put it in a css like this:

  • To center inline-block or inline elements such as: img, span, buttons, inputs, etc.

  .centertext {text-align: center; }

  • To center block elements, such as form, p, section, p, article, etc.

  .centerblock {margin: 0 auto; }

  • To center block, inline-block or inline elements without distinction

  .centerboth {text-align: center; margin: 0 auto;}

• Avoid using too much / br to separate tags , in most cases it's best to do it using CSS, using the property margin-top or padding-top , a trick is to do it using the measure em.

  • When you want 2 line breaks use: margin-top: 2em;

  • If you want 6 line breaks: padding-top: 6em

  • And so on. The truth is that most devs use margin, but padding is a good alternative, although that depends on the layout and the objective.

• There is a better way to align the buttons, nowadays flexbox and grids are getting very fashionable, but I'm going to recommend using a more classic one using floats, because I see that you do not have many bases yet . This css property allows to align the nested elements depending on the size of the parent container, you can float the elements on the left (float: right) or on the right (float: left) .

An example of practical layout according to my recommendations for your case, would be like this:

.form-tag{
  margin-top: 1em; /*separa un espacio de arriba*/
  margin-bottom: 5em; /*separa un espacio de abajo*/
}

.center{
  text-align: center;
}

.btn {
  position: absolute;
  background: skyblue;
  color: black;
  padding: 10px;
  border-radius: 5px;
  bottom: 10px;
  text-decoration: none;
  width: 26px;
  height: 20px;
}

.btn:hover {
  background: rgba(135, 206, 235, 0.8);
  color: blue;
  cursor: pointer;
}

.form_group{
  margin: auto;
  border: none;
  position: relative;
}

.form_group.imgs{
  margin-top: 4em;
}

.form_group.btns{
  width: 80% ;
  max-width: 400px;
  margin-top: 7em;  
}

#pagar {
  right: 0;
}

#atras {
  left: 0;
  float: left;
}

#grande{
  width: 460px;
  height: 400px;
}

<form class="form-tag center" action='pagar.php' name='mireserva' id='mireserva' method='POST'>
    <fieldset class="form_group imgs">
      <a href='imagenes/".$imagenes[0]."' class='zoom'>
        <img id='grande' src='imagenes/".$imagenes[0]."'/> 
      </a>        
    </fieldset>
    <fieldset class="form_group btns">
      <input type='image' src='imagenes/pagar.png' class="btn" name='pagar' id='pagar' />
      <input type='image' src='imagenes/atras.png' class="btn" name='atras' id='atras' onclick='javascript:history.back();'/>
    </fieldset>
  </form>

(Click on the execute button)

I hope it will serve you and many successes!