I do not know if you have already solved the problem, but since there has not yet been a valid answer, I add the following:
#detalles_reserva{
margin: auto;
width: 50%;
/*opcional*/
min-width: 325px;
max-width: 500px;
max-height: 900px;
background: #F3F3F3;
padding: 30px;
border: 1px solid rgba(0,0,0,0.2);
font-weight: bold;
}
#detalles_reserva input {
box-sizing: border-box;
margin: auto;
/*cambia block por inline-block*/
display: inline-block;
width: 150px;
height: 40px;
}
#detalles_reserva input[type="submit"] {
/*El estilo de borde, no se aplica porque esta mal*/
border: 0.8;
/*agregue de nuevo el borde pero corregido*/
border: 1px solid;
font-weight: bold;
color: red;
opacity: 0.9;
cursor: pointer;
border-radius: 20px;
margin-bottom: 0;
}
.center{/*o la clase como la hayas llamado*/
text-align: center;
}
/*Esto de abajo lo puedes ignorar, solo lo agrego por razones esteticas*/
#detalles_reserva img{
display: inline-block;
width: 20px;
height: 20px;
border: solid 1px;
}
<div id='detalles_reserva'>
<img src='imagenes/cabaña.png' height='22px' width='22px' alt=''> Cabaña: ".$idcabana."
<br/><br/>
<img src='imagenes/email.png' height='22px' width='22px' alt=''> Email: ".$idemail."
<br/><br/>
<img src='imagenes/calendario.jpg' height='22px' width='22px' alt=''> Check_in: ".$check_in.
<br/><br/>
<img src='imagenes/calendario.jpg' height='22px' width='22px' alt=''> Check_out: ".$check_out."
<br/><br/>
<img src='imagenes/personas.jpg' height='22px' width='22px' alt=''> Personas: ".$personas."
<br/><br/>
<img src='imagenes/euros.jpg' height='22px' width='22px' alt=''> Pago total: ".$pago_total."
<br/><br/>
<div class="center">
<input type='submit' name='cancelar' id='cancelar' value='CANCELAR PAGO'> <input type='submit' name='mireserva' id='mireserva' value='REALIZAR PAGO'>
</div>
</div>
As you can see, the only thing I have done is how you have been recommended to change the block to the inline-block . Add a div around the inputs and center the contents of this div.
By the way, also add min-width: 325px to the container #details reserve , since the running stackoverflow window is sparse, so the 50 % of this was less than 325px and that's why the second input went down in this demo.
The above is a simple solution to your problem and that fits your code, but so that it is not the same as the previous answer and if you ask yourself if there is a way to do it without using a div container , I offer you this other more modern alternative although a little more complex to understand:
#detalles_reserva{
margin: auto;
width: 50%;
/*opcional*/
min-width: 325px;
max-width: 500px;
max-height: 900px;
background: #F3F3F3;
padding: 30px;
border: 1px solid rgba(0,0,0,0.2);
font-weight: bold;
}
#detalles_reserva input {
box-sizing: border-box;
margin: auto;
/*cambia block por inline-block*/
display: inline-block;
--x: 150px;
width: var(--x);
height: 40px;
}
input#cancelar {
--y: 10px;
--n: 2; /*numero de inputs, en este caso 2*/
margin-right: var(--y);
--mitad: calc( ( var(--x) * var(--n) ) / 2 );
/* o la suma de todos los inputs dividida entre 2*/
--mitad-y: calc( var(--y) / 2 );
/* o la mitad del margen de separación entre los inputs*/
margin-left: calc(50% - (var(--mitad) + var(--mitad-y) ) );
}
#detalles_reserva input[type="submit"] {
/*El estilo de borde, no se aplica porque esta mal*/
border: 0.8;
/*agregue de nuevo el borde pero corregido*/
border: 1px solid;
font-weight: bold;
color: red;
opacity: 0.9;
cursor: pointer;
border-radius: 20px;
margin-bottom: 0;
}
/*Esto de abajo lo puedes ignorar, solo lo agrego por razones esteticas*/
#detalles_reserva img{
display: inline-block;
width: 20px;
height: 20px;
border: solid 1px;
}
<div id='detalles_reserva'>
<img src='imagenes/cabaña.png' height='22px' width='22px' alt=''> Cabaña: ".$idcabana."
<br/><br/>
<img src='imagenes/email.png' height='22px' width='22px' alt=''> Email: ".$idemail."
<br/><br/>
<img src='imagenes/calendario.jpg' height='22px' width='22px' alt=''> Check_in: ".$check_in.
<br/><br/>
<img src='imagenes/calendario.jpg' height='22px' width='22px' alt=''> Check_out: ".$check_out."
<br/><br/>
<img src='imagenes/personas.jpg' height='22px' width='22px' alt=''> Personas: ".$personas."
<br/><br/>
<img src='imagenes/euros.jpg' height='22px' width='22px' alt=''> Pago total: ".$pago_total."
<br/><br/>
<input type='submit' name='cancelar' id='cancelar' value='CANCELAR PAGO'> <input type='submit' name='mireserva' id='mireserva' value='REALIZAR PAGO'>
</div>
What did I do?
Clear the blank spaces in the html that separated both inputs
To the first input you add a calculator of css and by means of a formula it will always calculate how much to push this input to the right so that it is always centered.
In a nutshell this:
input#cancelar {
--y: 10px;
--n: 2; /*numero de inputs, en este caso 2*/
margin-right: var(--y);
--mitad: calc( ( var(--x) * var(--n) ) / 2 );
/* o la suma de todos los inputs dividida entre 2*/
--mitad-y: calc( var(--y) / 2 );
/* o la mitad del margen de separación entre los inputs*/
margin-left: calc(50% - (var(--mitad) + var(--mitad-y) ) );
}
The browser will translate it as:
input#cancelar {
margin-right: 10px;
margin-left: calc(50% - (150px + 5px) );
}
Being 150px the sum of both inputs between 2 (300/2) + 5px , which is half the margin added to separate both inputs. With this formula it does not matter how much you add margin of separation, it will always be centered.
By the way @ Omaza1990 seeing so many br and spaces & nbsp gave me a dejavu.