5

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.

Letras pegadas al 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>

2
  • Bueno, lo he probado y funciona JAJAJAJ gracias por la idea. Commented el 4 abr. 2018 a las 15:30
  • Genial :P Recuerda aceptar una de las respuestas si te fue de utilidad. Un saludo
    – lois6b
    Commented el 4 abr. 2018 a las 15:31

2 respuestas 2

11

Lo solucionas con Flexbox, aplicando a cada label para que sea un contenedor inline-flex y centrando su contenido con las propiedades justify-content y align-items en center.

$(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-flex;
	border-collapse:collapse;
	border-style: solid;
	border-width: 2px;
    width: 40px;
    height: 40px;
    align-items:center;
    justify-content: center;
}

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>

1
  • Buenísimo, no conocía esas propiedades :) (siempre usaba el padding, obteniendo malos resultados... gracias por el dato!).
    – quinqui
    Commented el 4 abr. 2018 a las 15:13
3

Al label le agregas la propiedad line-height (alto de línea) y le pones en pixeles la misma proporción que el height.

label {
    display: inline-block;
    border-collapse:collapse;
    border-style: solid;
    border-width: 2px;
    width: 40px;
    height: 40px;
    // acá agrego el line-height
    line-height: 40px;
    margin-top: auto;
    margin-bottom: auto;
}

$(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;
    line-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>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.