0

Me he encontrado un pequeño problemilla al intentar centrar de la misma manera los dos circulos:

document.getElementsByTagName("p")[0].style.marginLeft=getComputedStyle(document.getElementsByTagName("div")[0]).width;

document.getElementsByTagName("p")[0].style.marginTop=getComputedStyle(document.getElementsByTagName("div")[0]).height;

//Como se puede apreciar el circulo no queda perfectamente centrado entre las lineas de al lado y de arriba como si lo hace el otro circulo
div{
        background: grey;
        height: 100px;
        width: 100px;
        position: absolute;
        background-color: #b6b6af;
        outline:5px dashed #BCBCBC;
        outline-offset: 5px;
    }
#derecha{
        position: absolute;
        float: right;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #cccccc;
    }
#izquierda{
        position: absolute;
        bottom: 0px;
        float: left;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #cccccc;
        margin: -18px;
}
<div>
<p id="derecha"></p>
<p id="izquierda"></p>
</div>

Se que una solución puede ser restarle un 1px en las dos líneas de JS, pero lo veo poco dinámico ya que si la pantalla se hace más pequeña no cuadrara siempre.

Se les ocurre alguna otra idea?

Muchas gracias!

1
  • "pero lo veo poco dinámico ya que si la pantalla se hace más pequeña no cuadrara siempre" -> Has probado si se descuadran siempre, o solo cuando el número de px es, por ejemplo, impar (o par)? Porque si es problema de que sea impar, es tan fácil como mirar si es impar o no antes de restarle el 1
    – Benito-B
    Commented el 6 dic. 2022 a las 22:00

3 respuestas 3

1

La diferencia está en que a uno le pusiste un margin de -18px y al otro no.

Además puedes agregarle los atributos right: 0 y left: 0 para que se coloquen al borde del cuadrado y sacar los float que sirven para otra cosa.

También puedes colocar el código común en una clase.

En cuanto a margin-left y margin-right son para dejar un margen por más que los uses para posicionarlo.

body {
    margin: 50px;
}
div{
    background: grey;
    height: 100px;
    width: 100px;
    position: absolute;
    background-color: #b6b6af;
    outline:5px dashed #BCBCBC;
    outline-offset: 5px;
}
#derecha{
    position: absolute;
    bottom: 0;
    right: 0;
    margin: -18px;
}
#izquierda{
    position: absolute;
    bottom: 0;
    left: 0;
    margin: -18px;
}
.bola {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #cccccc;
}
<div>
   <p id="derecha" class="bola"/>
   <p id="izquierda" class="bola"/>
</div>

0

Algo asi te sirve?

body{
  padding: 20px;
}

div{
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: #b6b6af;
  outline: 5px dashed #BCBCBC;
  outline-offset: 5px;
}

#derecha{
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #cccccc;
}

#izquierda{
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #cccccc;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>
  <div>
    <p id="derecha"></p>
    <p id="izquierda"></p>
  </div>
  <script type="text/javascript" src="scripts2.js" defer></script>
</body>
</html>

De todas maneras muy dinamico no es, tenes tamaños fijos y posiciones fijas asi que no cambia aunque hagas zoom ni aunque achiques y agrandes el viewport. Tenes que importar el archivo normalize.css sino no se muestra bien el resultado.

0

Tu tienes los siguientes elementos:

  • 20px: diámetro del circulo
  • 5px: Ancho del borde
  • 5px: offset del borde

Luego tienes que:

  • 20px / 2 = 10px -> Es el centro del circulo
  • 5px / 2 = 2.5px -> Es el centro del borde

Entonces:

Centro_circulo + centro_borde + offset = 10px + 2.5px + 5px = 17.5px

17.5px es el valor que te tienes que mover hacia cualquier lado para que el circulo quede en el centro del outline. Ahora puedes ocupar right y bottom para posicionar

div{
        background: grey;
        height: 100px;
        width: 100px;
        position: relative;
        background-color: #b6b6af;
        outline:5px dashed #BCBCBC;
        outline-offset: 5px;
    }
#derecha{
        position: absolute;
        width:20px;
        height:20px;
        border-radius: 50%;
        background-color: #cccccc;
        margin:0;
        right: -17.5px;
        bottom: -17.5px;
    }
#izquierda{
        position: absolute;
        width:20px;
        height:20px;
        border-radius: 50%;
        background-color: #cccccc;
        margin:0;
        left: -17.5px;
        bottom: -17.5px;
}
<div>
<p id="derecha"></p>
<p id="izquierda"></p>
</div>

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.