Tengo un problema, y es que estoy haciendo un programa con jquery, y para cada casilla estoy utilizando un label (requisitos del profesor), pero no consigo centrar las letras en los bordes, se me van hacia el borde superior.
Dejo el código fuente por aquí:
Es posible que al ejecutar el snippet no se vea correctamente, es por la resolución en que se muestra. No os importe eso, sólo lo de centrar el texto en la caja.
$(document).ready(function(){
var index = 0;
for(index=0; index<225; index++){
var letra = letraAleatoria();
$("label").eq(index).text(letra);
}
});
/* --------------------- */
function anadirPalabras(){
var x = document.getElementById("txt").disabled;
if(x==true){
document.getElementById("txt").disabled = false;
}else{
document.getElementById("txt").disabled = true;
}
}
/* --------------------- */
function aJugar(){
document.getElementById("botonPalabras").disabled = true;
document.getElementById("botonPalabras").style.background = 'rgba(0, 20, 60, 0.2)';
document.getElementById("txt").disabled = true;
}
/* --------------------- */
function letraAleatoria(){
var posibles = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
return posibles.charAt(Math.floor(Math.random() * posibles.length));
}
/* --------------------- */
.inicio{
margin: auto;
text-align: center;
font-size: 20px;
/*background-color: aliceblue;*/
width: 90%;
padding: 20px;
}
body{
background-color:cornsilk;
align-content: center;
}
h1.tituloPagina{
font-style: italic;
font-family: monospace;
color: WHITE;
text-shadow: 0 0 3px #FF0000, 0 0 5px #8A4B08;
}
.sopaLetrasContainer{
text-align: center;
float: left;
width: 60%;
height: 700px;
background-color: antiquewhite;
margin-left: 100px;
border-style: dashed;
border-color: crimson;
border-width: 2px;
}
.sopaLetrasElemento{
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 6%;
font-size: 100%;
text-align: center;
}
.sopaLetrasElemento:hover{
background-color: bisque;
}
.botonera{
display: inline-block;
align-items: center;
justify-content: center;
margin-top: 40px;
margin-left: 10px;
}
input{
width: 150px;
height: 50px;
}
#botonPalabras{
background-color: rgba(220, 20, 60, 1);
}
#botonJugar{
background-color: rgba(20, 219, 179, 1);
margin-left: 10px;
}
#botonPalabras:hover{
background-color: rgba(220, 20, 60, 0.5);
}
#botonJugar:hover{
background-color: rgba(20, 219, 179, 0.5);
}
div.palabras{
width: auto;
align-items: center;
text-align: center;
float: center;
}
div.centro{
background-color: aqua;
display: inline;
}
div.primerafila{
margin-top:20px;
}
div.info{
width: 40%;
font-size: 9px;
text-align: center;
color: rgba(0,0,0,0.3);
margin: auto;
margin-top: 25px;
}
label{
display: inline-block;
border-collapse:collapse;
border-style: solid;
border-width: 2px;
width: 40px;
height: 40px;
margin-top: auto;
margin-bottom: auto;
}
div.txt{
background-color: burlywood;
width:315px;
height:200px;
margin-bottom: 50px;
}
textarea{
resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> Sopa de Letras by pgonzi01. </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sopaestilo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div class="inicio"><h1 class="tituloPagina">SOPA DE LETRAS by pgonzi01</h1></div>
<div class="centro">
<div class="sopaLetrasContainer">
<div class="primerafila">
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div><div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div><div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div><div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div><div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
<div>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
<label> - </label>
</div>
</div>
<div class="palabras">
<div class="botonera">
<div class="txt"><textarea rows="13" cols="42"></textarea></div>
<input id="botonPalabras" type="button" value="Añadir Palabras" onclick="anadirPalabras()">
<input id="botonJugar" type="button" value="A Jugar" onclick="aJugar()">
<div class="info"><p>Las palabras de menos de 2 caracteres o de más de 10 caracteres serán ignoradas.</p></div>
</div>
</div>
</div>
</body>
</html>