{"id":1308,"date":"2024-08-01T18:43:27","date_gmt":"2024-08-01T16:43:27","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1308"},"modified":"2024-08-01T18:43:27","modified_gmt":"2024-08-01T16:43:27","slug":"37-diseno-css-alineacion-horizontal-y-vertical","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/37-diseno-css-alineacion-horizontal-y-vertical\/","title":{"rendered":"37. Dise\u00f1o CSS – Alineaci\u00f3n horizontal y vertical"},"content":{"rendered":"\n

Para centrar horizontalmente un bloque de elementos (como un <div><\/em><\/strong>), se utiliza la propiedad margin: auto<\/em><\/strong>. Establecer el ancho del elemento evitar\u00e1 que se extienda hasta los bordes de su contenedor. Entonces, el elemento ocupar\u00e1 el ancho especificado y el espacio restante se dividir\u00e1 en partes iguales entre los dos m\u00e1rgenes:<\/p>\n\n\n\n\n\n\n\n

Centrar texto horizontalmente<\/h2>\n\n\n\n

Para centrar texto de manera horizontal utilizamos la propiedad text-align: center<\/em><\/strong>, como muestra el siguiente ejm.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>
<html>
  <head>
    <style>
      .center {
        text-align: center;
        border: 3px solid green;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Center Text<\/h2>

    <div class=\"center\">
      <p>Este texto est\u00e1 centrado.<\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Centrar una imagen<\/h2>\n\n\n\n
Para centrar una imagen, establece el margen izquierdo y derecho en autom\u00e1tico y convi\u00e9rtelo en un elemento de bloque.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Center an Image<\/h2>
    <p>
      Para centrar una imagen, configura los m\u00e1rgenes izquierdo y derecho en
      autom\u00e1tico, y convierte la imagen en un elemento de bloque.
    <\/p>

    <img src=\"sutilweb.jpg\" alt=\"Paris\" style=\"width: 40%\" \/>
  <\/body>
<\/html><\/pre>\n\n\n\n
Alineamiento utilizando float<\/h2>\n\n\n\n
Otro m\u00e9todo que se suele utilizar es utilizar la propiedad float<\/em><\/strong>, de la siguiente manera:<\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .right {
        float: right;
        width: 300px;
        border: 3px solid #73ad21;
        padding: 10px;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Alinear a la derecha con float<\/h2>

    <p>
      Este es un ejm de c\u00f3mo podemos alinear en este caso a la derecha con la
      propiedad float
    <\/p>

    <div class=\"right\">
      <p>
        In my younger and more vulnerable years my father gave me some advice
        that I've been turning over in my mind ever since.
      <\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
El truco clearfix<\/h2>\n\n\n\n
\n
Nota<\/strong>: si un elemento es m\u00e1s alto que el elemento que lo contiene y flota, se desbordar\u00e1 fuera de su contenedor. Puedes usar el \u00abtruco clearfix\u00bb para arreglar esto (mira el siguiente ejm).<\/p>\n<\/blockquote>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 3px solid #4caf50;
        padding: 5px;
      }

      .img1 {
        float: right;
      }

      .img2 {
        float: right;
      }

      .clearfix::after {
        content: \"\";
        clear: both;
        display: table;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Sin Clearfix<\/h2>

    <p>
      Esta imagen est\u00e1 flotando a la derecha. Tambi\u00e9n es m\u00e1s alto que el
      elemento que lo contiene, por lo que se desborda fuera de su contenedor:
    <\/p>

    <div>
      <img
        class=\"img1\"
        src=\"pineapple.jpg\"
        alt=\"Pineapple\"
        width=\"170\"
        height=\"170\"
      \/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
      imperdiet...
    <\/div>

    <h2 style=\"clear: right\">Con Clearfix<\/h2>
    <p>
      Agregue el truco clearfix al elemento contenedor para solucionar este
      problema:
    <\/p>

    <div class=\"clearfix\">
      <img
        class=\"img2\"
        src=\"pineapple.jpg\"
        alt=\"Pineapple\"
        width=\"170\"
        height=\"170\"
      \/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
      imperdiet...
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Centrar verticalmente usando padding<\/h2>\n\n\n\n
Hay muchas formas de centrar un elemento verticalmente en CSS. Una soluci\u00f3n simple es usar padding superior e inferior, de la siguiente manera:<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .center {
        padding: 70px 0;
        border: 3px solid green;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Centrar verticalmente con padding<\/h2>

    <p>
      En este ejemplo, usamos la propiedad padding para centrar el elemento div
      verticalmente:
    <\/p>

    <div class=\"center\">
      <p>Estoy centrado verticalmente.<\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Para centrar tambi\u00e9n horizontalmente utilizamos la propiedad text-align: center<\/em><\/strong>, de la siguiente manera:<\/p>\n\n\n\n
<!DOCTYPE html>
<html lang=\"es\">
  <head>
    <style>
      .center {
        width: 360px;
        padding: 140px0;
        border: 3px solid blue;
        text-align: center;
        margin: auto;
      }
    <\/style>
  <\/head>

  <body>
    <h1>Centrar verticalmente con padding<\/h1>
    <p>En este ejm centraremos verticalmente utilizando la propiedad padding<\/p>
    <div class=\"center\">
      <p>Estoy centrado verticalmente.<\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Centrar verticalmente utilizando line-height<\/h2>\n\n\n\n
Otro truco es usar la propiedad line-height<\/em><\/strong> con un valor que sea igual a la propiedad height<\/em><\/strong>. Veamos un ejm.<\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .center {
        line-height: 200px;
        height: 200px;
        border: 3px solid green;
        text-align: center;
      }

      \/* SI SE UTILIZAN M\u00daLTIPLES L\u00cdNEAS *\/
      .center p {
        line-height: 1.5;
        display: inline-block;
        vertical-align: middle;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Center with line-height<\/h2>

    <p>
      En este ejemplo, usamos la propiedad line-height con un valor que es igual
      a la propiedad de altura para centrar el elemento div:
    <\/p>

    <div class=\"center\">
      <p>Centrado tanto horizontal como verticalmente con line-height.<\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Centrar verticalmente utilizando position y transform<\/h2>\n\n\n\n
Si padding<\/em><\/strong> y line-height<\/em><\/strong> no son opciones, otra soluci\u00f3n es usar position<\/em><\/strong> y transform<\/em><\/strong> de la siguiente manera.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .center {
        height: 200px;
        position: relative;
        border: 3px solid green;
      }

      .center p {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    <\/style>
  <\/head>
  <body>
    <h2>Center with position and transform<\/h2>

    <p>
      En este ejemplo, usamos posicionamiento y la propiedad transform para
      centrar vertical y horizontalmente el elemento div:
    <\/p>

    <div class=\"center\">
      <p>Estoy horizontal y verticalmente posicionado.<\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Centrar verticalmente utilizando Fletbox<\/h2>\n\n\n\n
Tambi\u00e9n puedes usar flexbox<\/strong> para centrar las cosas. Solo ten en cuenta que flexbox<\/strong> no es compatible con IE10<\/strong> y versiones anteriores.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 3px solid green;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Flexbox Centering<\/h2>

    <p>
      Un contenedor con justify-content y align-items las propiedades
      establecidas en <em>center<\/em> alinear\u00e1n los elementos en el centro (en
      ambos ejes).
    <\/p>

    <div class=\"center\">
      <p>Estoy centrado horizontal y verticalmente.<\/p>
    <\/div>
  <\/body>
<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
Para centrar horizontalmente un bloque de elementos (como un <div>), se utiliza la propiedad margin: auto. Establecer el ancho del elemento […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":36,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1308","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Para centrar horizontalmente un bloque de elementos (como un <div>), se utiliza la propiedad margin: auto. Establecer el ancho del elemento […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1308"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1308\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1308\/revisions\/1311"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}