no se, si ya has solucionado el problema, pero como aún no ha habido una respuesta válida, agrego lo siguiente:
#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>
Como ves, lo único que he hecho es como te han recomendado cambiar el block por el inline-block. Agregar un div alrededor de los inputs y centrar el contenido de este div.
Por cierto, también agregue min-width: 325px al contenedor #detalles reserva, ya que la ventana de stackoverflow de ejecución es poco ancha, por lo que el 50% de esta era menor a 325px y por eso el segundo input bajaba en este demo.
Lo anterior es una solución sencilla a tu problema y que se ajusta a tu código, pero para que no quede igual que la respuesta anterior y por si te preguntas si hay una forma de hacerlo sin usar un div contenedor, te ofrezco esta otra alternativa más moderna aunque un poco más compleja de entender:
#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>
¿Que hice?
- Borrar los espacios en blanco en el html que separaban ambos inputs
- Al primer input le agregue un calculador de css y mediante una formula este siempre calculará cuanto empujar a este input a la derecha para que siempre quede centrado.
En pocas palabras esto:
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) ) );
}
Lo traducirá el navegador como:
input#cancelar {
margin-right: 10px;
margin-left: calc(50% - (150px + 5px) );
}
Siendo 150px la suma de ambos inputs entre 2 (300 / 2) + 5px, que es la mitad del margen agregado para separar ambos inputs. Con esta fórmula no importa cuanto agregues de margin de separación, siempre estará centrado.
Por cierto @Omaza1990 al ver tantos br y espacios   me dio un dejavú.
inline
oinline-block
? Así:#detalles_reserva input { margin: auto; display: inline-block; o inline;