¿Cómo centrar el texto (horizontal y verticalmente) dentro de un bloque div en CSS?
Centrar texto tanto horizontal como verticalmente dentro de un bloque div Es importante para crear diseños visualmente atractivos. Varios métodos, como las transformaciones flexbox, grid y CSS, ofrecen soluciones con distintos beneficios e inconvenientes. Este artículo examina estos enfoques comunes para lograr el centrado del texto dentro de bloques div.
Tabla de contenidos
- Usando Flexbox
- Usando cuadrícula
- Usando alineación de texto
- Usando la celda de la tabla
- Usando la propiedad de transformación
Usando Flexbox:
- Establezca el contenedor principal en pantalla: flexible; Esto permite el uso de un caja flexible y convierte el contenedor principal en un contenedor flexible.
- Usar justificar contenido: centro para centrar el elemento secundario horizontalmente dentro del contenedor principal.
- Usar alinear elementos: centro para centrar el elemento secundario verticalmente dentro del contenedor principal.
Ejemplo: Este ejemplo muestra cómo centrar texto dentro de un div usando la propiedad flexbox de CSS .
HTML
Centrar el texto horizontal y verticalmente dentro del título de un bloque div> <style>cuerpo {text-align: center; } .contenedor { altura: 300px; ancho: 645 px; pantalla: flexible; justificar-contenido: centro; alinear elementos: centro; borde: 2px negro sólido; } h1 { color: verde; } estilo> cabeza> <body> <div> <h1>GeekforGeeksh1> div> cuerpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-grid'> <span>Usando cuadrícula </span> </h2> <ul> <li value='1'> <span>cuadrícula CSS </span> <span>es otra herramienta de diseño popular que le permite crear diseños complejos y flexibles basados en cuadrículas. </span> </li> <li value='2'> <span>Establezca el contenedor principal en </span> <b> <strong>pantalla: cuadrícula </strong> </b> <span>. Esto permite el uso de una cuadrícula CSS y convierte el contenedor principal en un contenedor de cuadrícula. </span> </li> <li value='3'> <span>Utilizar el </span> <b> <strong> </strong> </b> <b> <strong>colocar elementos: centro </strong> </b> <span>propiedad para centrar el elemento secundario tanto horizontal como verticalmente dentro de la celda de la cuadrícula. Esta propiedad es una abreviatura de ambos. </span> <b> <strong>justificar elementos </strong> </b> <span>y </span> <b> <strong>alinear elementos </strong> </b> <span>. </span> </li> </ul> <p dir='ltr'> <b> <strong>Ejemplo: </strong> </b> <span>Este ejemplo muestra cómo centrar texto dentro de un div usando la propiedad de cuadrícula de CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centrar el texto horizontal y verticalmente dentro del título de un bloque div> <style>.contenedor {altura: 300px; ancho: 645 px; pantalla: cuadrícula; colocar elementos: centro; borde: 2px negro sólido; } h1 { color: verde; } estilo> cabeza> <body> <div> <h1>GeekforGeeksh1> div> cuerpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-text-align'> <b> <strong>Usando alineación de texto: </strong> </b> </h2> <ul> <li value='1'> <span>El </span> <span>texto alineado </span> <span>La propiedad es una forma sencilla y directa de centrar el texto horizontalmente dentro de un bloque div. </span> </li> <li value='2'> <span>Establezca el contenedor principal en </span> <b> <strong>alineación de texto: centro. </strong> </b> <span>Esto centra el elemento secundario horizontalmente dentro del contenedor principal. </span> </li> <li value='3'> <span>Usar </span> <b> <strong>altura de la línea: </strong> </b> <span>para centrar el elemento secundario verticalmente dentro del contenedor principal. El valor de debe ser igual a la altura del contenedor principal. </span> </li> </ul> <p dir='ltr'> <b> <strong>Ejemplo: </strong> </b> <span>Este ejemplo muestra cómo centrar el texto dentro de un div usando la alineación de texto de CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centrar el texto horizontal y verticalmente dentro del título de un bloque div> <style>.contenedor {altura: 300px; ancho: 645 px; alineación de texto: centro; altura de línea: 400 px; borde: 2px negro sólido; } h1 { color: verde; } estilo> cabeza> <body> <div> <h1>GeekforGeeksh1> div> cuerpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-table-cell'> <span>Usando la celda de la tabla </span> </h2> <ul> <li value='1'> <span>Establezca el contenedor principal en </span> <b> <strong>pantalla: tabla. </strong> </b> <span>Esto emula el comportamiento de una tabla. </span> </li> <li value='2'> <span>Establezca el elemento secundario en </span> <b> <strong>pantalla: celda de tabla </strong> </b> <span>. Esto emula el comportamiento de una celda de una tabla. </span> </li> <li value='3'> <span>Usar </span> <b> <strong>alineación vertical: medio </strong> </b> <span>para centrar el elemento secundario verticalmente dentro del contenedor principal. </span> </li> <li value='4'> <span>Usar </span> <b> <strong>alineación de texto: centro </strong> </b> <span>para centrar el elemento secundario horizontalmente dentro del contenedor principal. </span> </li> </ul> <p dir='ltr'> <b> <strong>Ejemplo: </strong> </b> <span>Este ejemplo muestra cómo centrar el texto dentro de un div usando la celda de la tabla de texto de CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centrar el texto horizontal y verticalmente dentro del título de un bloque div> <style>.contenedor {altura: 300px; ancho: 645 px; mostrar: celda de tabla; alineación de texto: centro; alineación vertical: medio; borde: 2px negro sólido; } h1 { color: verde; } estilo> cabeza> <body> <div> <h1>GeekforGeeksh1> div> cuerpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-transform-property'> <span>Usando la propiedad de transformación: </span> </h2> <ul> <li value='1'> <span>Establezca el contenedor principal en </span> <b> <strong>posición: relativa. </strong> </b> <span>Esto permite el uso de posicionamiento absoluto para el elemento secundario. </span> </li> <li value='2'> <span>Establezca el elemento secundario en </span> <b> <strong>posición: absoluta. </strong> </b> <span>Esto permite el uso de posicionamiento absoluto para el elemento secundario. </span> </li> <li value='3'> <span>Establecer el elemento hijo </span> <b> <strong>arriba </strong> </b> <span>y </span> <b> <strong>izquierda </strong> </b> <span>propiedades para </span> <b> <strong>50% </strong> </b> <span>. Esto posiciona el elemento hijo en el centro del contenedor principal. </span> </li> <li value='4'> <span>Usar </span> <b> <strong>transformar: traducir (-50%, -50%) </strong> </b> <span>para centrar el elemento hijo tanto horizontal como verticalmente. </span> </li> </ul> <p dir='ltr'> <b> <strong>Ejemplo: </strong> </b> <span>Este ejemplo muestra cómo centrar texto dentro de un div usando la propiedad de transformación de CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centrar el texto horizontal y verticalmente dentro del título de un bloque div> <style>.contenedor {altura: 300px; ancho: 645 px; posición: relativa; borde: 2px negro sólido; } h1 { posición: absoluta; arriba: 50%; color verde; izquierda: 50%; transformar: traducir (-50%, -50%); } estilo> cabeza> <body> <div> <h1>GeekforGeeksh1> div> cuerpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Producción: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <p dir='ltr'> <span>En resumen, el enfoque elegido dependerá del caso de uso específico, la compatibilidad con otros elementos y la estética del diseño deseada. Con estos métodos, es posible lograr un bloque de texto centrado en una variedad de diseños y disposiciones. </span> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Compartir </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=¿Cómo centrar el texto (horizontal y verticalmente) dentro de un bloque div en CSS?&url=https://www.techcodeview.com/es/how-center-text-horizontally"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/es/how-center-text-horizontally"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/es/how-center-text-horizontally&title=¿Cómo centrar el texto (horizontal y verticalmente) dentro de un bloque div en CSS?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Te Puede Gustar </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/es/is-196-perfect-square" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/maths-formulas/77/is-196-perfect-square.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Es 196 un cuadrado perfecto?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/es/is-196-perfect-square">¿Es 196 un cuadrado perfecto? </a>
</h4>
</div> <div class="group">
<a href="/es/selenium-webdriver-installation" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/selenium-tutorial/17/selenium-webdriver-installation.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Selenium WebDriver: instalación" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/es/selenium-webdriver-installation">Selenium WebDriver: instalación </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Artículos Más Populares </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/what-is-cloud-console">
<img src="https://techcodeview.com/img/blog/06/what-is-cloud-console.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es la consola en la nube?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/what-is-cloud-console" class="hover:text-tech-500 transition-colors line-clamp-3">¿Qué es la consola en la nube? </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/how-solve-rubiks-cube-13132">
<img src="https://techcodeview.com/img/blog/81/how-solve-rubiks-cube.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo resolver un cubo de Rubik: 4 formas diferentes" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/how-solve-rubiks-cube-13132" class="hover:text-tech-500 transition-colors line-clamp-3">Cómo resolver un cubo de Rubik: 4 formas diferentes </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/sql-date-time-functions">
<img src="https://techcodeview.com/img/it-problems-solutions/57/sql-date-time-functions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Funciones de fecha y hora de SQL" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/sql-date-time-functions" class="hover:text-tech-500 transition-colors line-clamp-3">Funciones de fecha y hora de SQL </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/easy-trick-convert-celsius-fahrenheit-1312">
<img src="https://techcodeview.com/img/blog/26/easy-trick-convert-celsius-fahrenheit.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="El truco fácil para convertir grados Celsius a Fahrenheit" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/easy-trick-convert-celsius-fahrenheit-1312" class="hover:text-tech-500 transition-colors line-clamp-3">El truco fácil para convertir grados Celsius a Fahrenheit </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/bharti-jha">
<img src="https://techcodeview.com/img/biography/96/bharti-jha.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bharti Jha" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/bharti-jha" class="hover:text-tech-500 transition-colors line-clamp-3">Bharti Jha </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/how-install-tkinter-python">
<img src="https://techcodeview.com/img/python-tutorial/87/how-install-tkinter-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo instalar Tkinter en Python" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/how-install-tkinter-python" class="hover:text-tech-500 transition-colors line-clamp-3">Cómo instalar Tkinter en Python </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/compiling-c-program">
<img src="https://techcodeview.com/img/c-basics/27/compiling-c-program.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Compilación de un programa en C: detrás de escena" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/compiling-c-program" class="hover:text-tech-500 transition-colors line-clamp-3">Compilación de un programa en C: detrás de escena </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/jk-flip-flop">
<img src="https://techcodeview.com/img/digital-electronics/54/jk-flip-flop.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Chanclas JK" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/jk-flip-flop" class="hover:text-tech-500 transition-colors line-clamp-3">Chanclas JK </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/c-structures">
<img src="https://techcodeview.com/img/c-basics/58/c-structures.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Estructuras C" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/c-structures" class="hover:text-tech-500 transition-colors line-clamp-3">Estructuras C </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/what-does-good-letter-recommendation-look-like-1311554">
<img src="https://techcodeview.com/img/blog/70/what-does-good-letter-recommendation-look-like.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cómo es una buena carta de recomendación?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/what-does-good-letter-recommendation-look-like-1311554" class="hover:text-tech-500 transition-colors line-clamp-3">¿Cómo es una buena carta de recomendación? </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categoría </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/es/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/es/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversión De Java
</a> <a href="/es/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matemáticas
</a> <a href="/es/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Colecciones Java
</a> <a href="/es/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Diferencias
</a> <a href="/es/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Cadena De Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Artículos De Interés </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/interview-questions/41/c-interview-questions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Preguntas y respuestas de la entrevista sobre C++ (2024)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/interview-questions/">Preguntas De Entrevista </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/c-interview-questions">Preguntas y respuestas de la entrevista sobre C++ (2024) </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/bash-tutorial/41/bash-write-file.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bash escribir en un archivo" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/bash-tutorial/">Tutorial De Bash </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/bash-write-file">Bash escribir en un archivo </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/machine-learning/78/multiple-linear-regression.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Regresión lineal múltiple" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/machine-learning/">Aprendizaje Automático </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/multiple-linear-regression">Regresión lineal múltiple </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/linux-directories/39/mkdir-command-linux-unix-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comando mkdir en Linux/Unix con ejemplos" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/linux-directories/">Directorios De Linux </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/mkdir-command-linux-unix-with-examples">Comando mkdir en Linux/Unix con ejemplos </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/css-tutorial/38/how-add-background-image-css.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cómo agregar una imagen de fondo en CSS?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/css-tutorial/">Tutorial Css </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/how-add-background-image-css">¿Cómo agregar una imagen de fondo en CSS? </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/python/71/working-with-images-in-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Trabajar con imágenes en Python" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/python/">Pitón </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/working-with-images-in-python">Trabajar con imágenes en Python </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Todos Los Derechos Reservados |
<a href="//www.techcodeview.com/ja/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>