En este artículo, veremos cómo centrar un div en el borde de otro div usando SASS . SASS es una extensión de CSS que significa Syntactically Awesome Style Sheets . Nos ayuda a crear cosas como variables, reglas anidadas, etc. Para que podamos reutilizar el código.
Centrar un div en el borde de otro div no es una tarea difícil. Podemos lograrlo usando la propiedad de posición y las propiedades inferior, superior izquierda y derecha. Lo que necesitamos ver es cómo Sass puede reducir nuestro trabajo aquí.
Ejemplo:
Código HTML: En HTML, crearemos dos elementos div. Uno que está afuera se llamará div externo y otro se llamará div interno.
HTML
<!DOCTYPE html> <html> <head> <title> How to centre a div on the edge of another div </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="outer-div"> <div id="inner-div"></div> </div> </body> </html>
Código SASS: Sass se usa para dar un estilo general y para centrar el div interno en el borde del div externo. Creamos un accesorio llamado mixin con parámetros para las propiedades (alto, ancho, color de fondo y posición) para que no necesitemos escribir lo mismo para ambos elementos div. Simplemente podemos incluir esta combinación y proporcionar el valor de las propiedades. Usamos la propiedad de posición y ponemos el valor de la propiedad izquierda al 50% que centrará el div interno horizontalmente. El valor de la propiedad inferior es cero, por lo que el div interior estará en el borde del div exterior.
SASS
// For properties of both div
@mixin prop ($height, $width, $bg, $pos) {
height: $height;
width: $width;
background-color: $bg;
position: $pos;
}
#outer-div {
@include prop(190px, 50%, #0057D9, relative);
}
// Inner div properties
#inner-div {
@include prop(70px, 70px, #8ebf42, absolute);
left: 50%;
transform: translate(-50%);
bottom: 0;
padding: 3px;
}
Producción:
Centre un Div en el borde de otro div (GFG)
Ejemplo 2: en este ejemplo, centre un div en el borde lateral de otro div. Todo en HTML será igual. En Sass, usamos la propiedad top con un valor del 50 % que centrará el div interior verticalmente y pondrá el valor de la propiedad left en cero para que el div interior quede en el borde lateral. Aparte de este fragmento de código, el resto será el mismo.
SASS
#inner-div {
@include prop(70px, 70px, #8ebf42, absolute);
left: 0;
transform: translate(0, -50%);
top: 50%;
padding: 3px;
}
Producción:
Centre div en el borde izquierdo de otro div (GFG)
Ejemplo 3:
Código HTML: en este ejemplo, creamos cuatro elementos div dentro de nuestro div externo. Veremos cómo centrar todos los elementos div internos en los bordes de nuestro div externo.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="outer-div"> <div id="top-div"></div> <div id="left-div"></div> <div id="right-div"></div> <div id="bottom-div"></div> </div> </body> </html>
Sass Code: en Sass, creamos un mixin llamado prop que incluimos en todos los elementos div. De manera similar, se crea un div pequeño mixin para todos los elementos div dentro de nuestro div externo. Creamos otros dos mixins uno es verticalcentre(mixin) que es para centrar el div verticalmente. Para centrar el div verticalmente proporcionamos el valor máximo al 50%. En el centro vertical (mixin), hay una condición si y si no, si el valor de la derecha se da como verdadero, entonces el valor de la propiedad de la derecha será cero; de lo contrario, el valor de la propiedad de la izquierda será cero, lo que decidirá en qué borde lateral. estará en. horizontalcentre(mixin) también tiene la misma lógica, pero se centrará horizontalmente.
SASS
// Mixin for Common properties of all div
@mixin prop($height, $width, $bg, $pos) {
height: $height;
width: $width;
background-color: $bg;
position: $pos;
}
// Div inside which we will centre another divs
#outer-div {
@include prop(190px, 400px, #0057D9, relative);
}
// Common properties of all small divs
@mixin smalldiv {
@include prop(50px, 50px, #8ebf42, absolute);
padding: 3px;
}
// Mixin for div that vertically centred
// on the edge
@mixin verticalcentre($right:false) {
top: 50%;
transform: translate(0, -50%);
@if ($right) {
right: 0;
}
@else {
left: 0;
}
}
// Mixin for div that are horizontally
// centred on the edge
@mixin horizontalcentre($top:false) {
left: 50%;
transform: translate(-50%);
@if($top) {
top: 0;
}
@else {
bottom: 0;
}
}
// Including mixin in each div
#top-div {
@include smalldiv;
@include horizontalcentre($top: true);
}
#bottom-div {
@include smalldiv;
@include horizontalcentre($top: false);
}
#right-div {
@include smalldiv;
@include verticalcentre($right: true);
}
#left-div {
@include smalldiv;
@include verticalcentre($right: false);
}
Producción:
Centre div en los bordes de otro div (GFG)
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA