I have this code (Yes, it's pretty bad):
<?php include("../../controllers/config.php"); include ("../../controllers/protect.php"); if(!isset($_SESSION)){ session_start(); }?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Catálogo</title><style> *{ margin: 0; padding: 0; box-sizing: border-box; }/*Base sets*/ :root{ --lightThemeColor1: #ecd8ff; --lightThemeColor2: #4d1147; --lightThemeColor3: #2f0a2b; --fontClara: white; --shadow:rgb(36, 36, 36); }/*Área das variáveis*/ section.catalogo-principal-box{ width: 100%; padding: 30px;& h1{ font-size: 32px; margin: 0px 0px 30px 0px; }& div.books{ width: 100%; display: flex; background-color: var(--lightThemeColor2); flex-wrap:wrap; padding: 12.5px; border: 5px solid var(--lightThemeColor3); box-shadow: 2px 3px 4px 0px rgb(80,80,80); }& div#livro0{ background-color:red; margin:0; } & div.book{ width: 80px; height:100px; background-color:var(--lightThemeColor3); display: flex; margin: 0px 5rem; a{ width: 100%; height:90%; } } }</style></head><body><section class="catalogo-principal-box"><h1>Catálogo</h1><?php $sqlcode = "SELECT * FROM livro"; $sqlquery = $conn->query($sqlcode); $qtd = $sqlquery->num_rows; if($qtd >= 1){ ?><div class="books"><?php for($i = 0; $i < $qtd; $i++){ $livro = $sqlquery->fetch_assoc(); $livroCod = $livro['Livro_Cod']; ?><div class="book" id="<?php echo "livro{$i}";?>"><?php if(isset($_SESSION['Aluno_RM']) and $_SESSION['user_type'] == 'aluno'){ echo "<a href='../php/home.php?actionsAluno=book&livroCod={$livroCod}'><img style='width:50px;' src='../../{$livro['Livro_Capa']}'></a>"; echo "<p>ola</p>"; }else if(isset($_SESSION['Func_Cod']) and $_SESSION['user_type'] == 'funcionario'){ echo "<a href='../php/home.php?actionsFunc=book&livroCod={$livroCod}'><img style='width:50px;' src='../../{$livro['Livro_Capa']}'></a>"; echo "<p>ola</p>"; } ?><div><?php } ?></div><?php } ?> </section></body></html>and this is the result:
focus on the red line, i need align the image and
tag like column, pls help me
I literally tried everything, alone (bad idea) and with GPT (another bad idea), i tried add flex-direction: column; property and this worked, but design was ruined.The strange thing is that I created a new file (all in HTML to be quick) and the code worked, I don't know what it could be