Puedes lograrlo de la forma simple y rápida así:
<p align="center">
<iframe src="https://open.spotify.com/embed/album/2g4i8tiNEGn1dCNYeuvixB" width="400" height="840" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<p/>
Esto centrará el <iframe>
de forma automática. Pero hay dos problemas, primero el atributo align
es obsoleto en HTML5 y segundo, esto sería un hack de diseño, cosa que no me gusta.
En su lugar, usemos las clases que nos ofrece Bootstrap.
Para trabajar con elementos "embebidos" (embed
), Bootstrap recomienda las siguientes clases .embed-responsive
y .embed-responsive-16by9
, esta última define el aspect ratio
.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>
Por último para centrar tu contenedor, se usa la clase .mx-auto
. Hasta aquí tu lista ocuparía el 100% del ancho de su contenedor, para cambiar esto podrías simplemente usar la clase .w-50
que lo reduce al 50% del tamaño, la consideración aquí es que ese 50% es relativo al tamaño de la pantalla, por lo cual en resoluciones menores se puede ver afectado.
¿Qué solución queda? Pues en tu código ya tienes definido un ancho en 400px
, ese ancho debes aplicarlo al contenedor y no al iframe
. También es recomendable quitar los atributos frameborder
y allowtransparency
porque son obsoletos.
Tu código quedaría entonces así:
<div class="embed-responsive embed-responsive-16by9 mx-auto" style="width: 400px;">
<?php
$sql = "SELECT enlace_spotify FROM listas WHERE ano = $recopilatorio";
$resultados = mysqli_query($conexion, $sql);
while($fila = mysqli_fetch_assoc($resultados))
{
$enlace_spotify = $fila['enlace_spotify'];
echo '<iframe src="'.$enlace_spotify.'" height="840" allow="encrypted-media"></iframe>';
}
mysqli_close($conexion);
?>
</div>
Actualización:
Como mencionas en los comentarios, tienes dos columnas y en la columna derecha tienes el iframe. Deberías hacer esto, explico el código en los comentarios del mismo:
<!-- Contenedor principal -->
<div class="container">
<!-- Crea columnas como filas -->
<div class="row">
<!-- Columna izquierda -->
<div class="col-md-6 col-sm-12">
IZQ
</div> <!-- Cierre columna izquierda -->
<!-- Columna derecha -->
<div class="col-md-6 col-sm-12">
DER
<!-- Abre embed -->
<div class="embed-responsive embed-responsive-16by9 mx-auto" style="width: 400px; height: 840px;">
<?php
$sql = "SELECT enlace_spotify FROM listas WHERE ano = $recopilatorio";
$resultados = mysqli_query($conexion, $sql);
while($fila = mysqli_fetch_assoc($resultados))
{
$enlace_spotify = $fila['enlace_spotify'];
echo '<iframe src="'.$enlace_spotify.'" allow="encrypted-media"></iframe>';
}
mysqli_close($conexion);
?>
</div> <!-- Cierra embed -->
</div> <!-- Cierra columna derecha -->
</div> <!-- Cierra row -->
</div> <!-- Cierra container -->
Puedes ver un ejemplo funcionando en Codepen.