a komik.dk<\/a> por ayudarnos a crear esta gu\u00eda.<\/p>\n\nUtiliza el siguiente procedimiento para alinear al centro un Bot\u00f3n CSS.<\/p>\n\n
Centrar: Alineaci\u00f3n del texto – Simplemente cambiando la alineaci\u00f3n del texto al centro desde la propiedad de la etiqueta div.<\/p>\n\n
margen: auto – Seleccionando la opci\u00f3n de margen autom\u00e1tico en la ventana de propiedades<\/p>\n\n
posici\u00f3n: fija – Estableciendo el atributo de posici\u00f3n como fijo<\/p>\n\n
display: flex – Cambiando el atributo display a flex<\/p>\n\n
mostrar: cuadr\u00edcula – Puedes mostrar la cuadr\u00edcula seleccionando el atributo mostrar a la cuadr\u00edcula.<\/p>\n\n
1. Centrando el atributo text-align de la etiqueta body (text-align: center)<\/h3>\n\n
En este ejemplo, utilizamos el atributo de centrado ‘text-align’ en la etiqueta ‘body>, que centra autom\u00e1ticamente todo lo que hay dentro.<\/p>\n\n
2. Centrando el atributo text-align de la etiqueta div padre (text-align: center)<\/h3>\n\n
En el ejemplo siguiente, estamos utilizando la propiedad de centrado ‘text-align’ en un elemento div> con la clase (button-container-div) para asegurarnos de que todo lo que se incluya dentro de este div> se alinee autom\u00e1ticamente al centro.<\/p>\n\n
3. Utilizando la propiedad margin auto, centra el bot\u00f3n CSS (Margen: auto)<\/h3>\n\n
Estamos utilizando la propiedad auto ‘ Margen’. Margen centra autom\u00e1ticamente el div en la pantalla. <\/p>\n\n
4. Utiliza un bot\u00f3n CSS de posici\u00f3n fija para centrarlo.<\/h3>\n\n
En este ejemplo, estamos estableciendo un margen del 50% desde el lado izquierdo de la p\u00e1gina y luego utilizamos position: fixed para centrar el cuerpo.<\/p>\n\n
5. Especificando la propiedad flex para la propiedad display (display: flex)<\/h3>\n\n
En este ejemplo, estamos aplicando la propiedad flex ‘display’, as\u00ed como las propiedades ‘justify-content’ y ‘align-items’, a la etiqueta div> padre con clase (button-container-div). El bot\u00f3n contenido en el div> se centrar\u00e1 tanto en el eje vertical como en el horizontal. <\/p>\n\n
Justificar-contenido centra el bot\u00f3n horizontalmente.<\/p>\n\n
El centro Alinear elementos lo mantiene en el centro; de lo contrario, empezar\u00e1 en la parte superior del div y seguir\u00e1 hacia abajo.<\/p>\n\n
C\u00f3mo centrar horizontalmente un Bot\u00f3n en CSS<\/h2>\n\n
Puede ser un poco dif\u00edcil, pero aqu\u00ed tienes algunas t\u00e9cnicas r\u00e1pidas para centrar tu bot\u00f3n, independientemente del tipo de elemento.<\/p>\n\n
Alinear elementos en el centro<\/h2>\n\n
Para centrar horizontalmente un elemento de bloque (como div>), utiliza margin: auto;<\/p>\n\n
Establecer la anchura del elemento impide que se expanda m\u00e1s all\u00e1 de los l\u00edmites de su contenedor.<\/p>\n\n
El elemento rellenar\u00e1 entonces la anchura requerida, dejando la misma cantidad de espacio entre los dos m\u00e1rgenes:<\/p>\n\n
Este elemento div tiene una posici\u00f3n central.<\/p>\n\n
Elemento bot\u00f3n con un bloque inline<\/h2>\n\n
Por defecto, los elementos bot\u00f3n y enlace est\u00e1n configurados para mostrar: inline-block. Encerrar\u00e1s una parte con un conjunto inline-block dentro del flujo habitual de izquierda a derecha del documento en la p\u00e1gina. <\/p>\n\n
Esto significa que si hay suficiente espacio horizontal entre dos componentes de bloque en l\u00ednea, aparecer\u00e1n uno al lado del otro.<\/p>\n\n
Esto es comparable a los elementos con display: inline establecido, excepto que los elementos inline-block, pueden tener su altura y anchura controladas, pero no los elementos inline.<\/p>\n\n
Usar text-align: center para centrar el texto<\/h2>\n\n
Al establecer alineaci\u00f3n de texto: centrar en un elemento padre, puedes centrar elementos en l\u00ednea (y en l\u00ednea).<\/p>\n\n
Nuestro elemento button> est\u00e1 encerrado en un div> con text-align: center establecido.<\/p>\n\n
Con una anchura fija, se trata de un elemento de bot\u00f3n de bloque.<\/h2>\n\n
La alineaci\u00f3n del texto: centrado no puede utilizarse para centrar componentes de bloque, ya que por defecto son de ancho completo a menos que se les proporcione un ancho est\u00e1tico.<\/p>\n\n
Si alguna vez necesitas establecer la anchura est\u00e1tica de un bot\u00f3n, puedes utilizar esta t\u00e9cnica para centrar el bot\u00f3n en la p\u00e1gina.<\/p>\n\n
Supongamos que tenemos un bot\u00f3n de 200px de ancho. Aunque s\u00f3lo tenga 200px de ancho, no permitir\u00e1 colocar ning\u00fan elemento adicional adyacente. <\/p>\n\n
Puedes centrar un elemento de nivel bloque estableciendo el margen izquierdo y el margen derecho en auto. Para ello, podemos utilizar la abreviatura margin: 0 auto. (Esto tambi\u00e9n pone a cero el margen superior y el margen inferior). <\/p>\n\n
Usar flexbox para centrar<\/h2>\n\n
Alternativamente, puedes utilizar flexbox para centrar tanto elementos inline-block como block.<\/p>\n\n
Envuelve el bot\u00f3n en un div> padre y hazlo visible: center flex y justify-content.<\/p>\n\n
La configuraci\u00f3n de flexbox permite centrar el bot\u00f3n horizontal y verticalmente. Podemos centrar horizontalmente el elemento bot\u00f3n utilizando la propiedad CSS align-items con el valor center. Al mismo tiempo, podemos utilizar la propiedad CSS justify-content junto con el valor center para centrar verticalmente el elemento bot\u00f3n. <\/p>\n\n
Para centrar un elemento bot\u00f3n horizontal y verticalmente, debemos proporcionar las propiedades CSS justificar-contenido y alinear-elementos, adem\u00e1s del valor centrar.<\/p>\n\n
Utilizaci\u00f3n de la propiedad de transformaci\u00f3n CSS<\/h2>\n\n
Adem\u00e1s de la propiedad flexbox, tambi\u00e9n podemos utilizar un conjunto de propiedades CSS para centrar el bot\u00f3n horizontal y verticalmente. A\u00f1ade posiciones relativas y absolutas a la clase contenedor y a la clase que contiene el bot\u00f3n. Ahora, utilizando left:50% y top:50%, centra el bot\u00f3n en el contenedor. Adem\u00e1s, utiliza transform: translate (-50 por ciento ,-50 por ciento ). <\/p>\n\n
Dos botones adyacentes<\/h2>\n\n
Ocasionalmente, puede que desees tener dos botones adyacentes pero centrados en la p\u00e1gina.<\/p>\n\n
Puedes conseguirlo envolviendo ambos botones en un div> padre y centr\u00e1ndolos en la p\u00e1gina mediante flexbox.<\/p>\n\n
En particular, hemos a\u00f1adido margin-right: 20px al primer bot\u00f3n para separarlos.<\/p>\n\n
Utilizar los modelos CSS flexbox y grid para centrar un bot\u00f3n<\/h2>\n\n
Adem\u00e1s, puedes centrar un elemento bot\u00f3n cambiando el modo de visualizaci\u00f3n del elemento contenedor a flex o grid y a\u00f1adi\u00e9ndole la propiedad justify-content: center.<\/p>\n\n
Por ejemplo, si utilizas un div> como contenedor del elemento bot\u00f3n>, esta regla CSS centrar\u00e1 el horizontal del div>:<\/p>\n\n
.center-h {<\/p>\n\n
display: flex; \/* o display:grid *\/<\/p>\n\n
justify-content: center;<\/p>\n\n
}<\/p>\n\n
La ventaja de utilizar una arquitectura CSS flexbox o grid es que puedes centrar el contenido vertical y horizontalmente.<\/p>\n\n
Reflexiones finales sobre c\u00f3mo centrar horizontalmente un bot\u00f3n en CSS<\/h2>\n\n
Estos son los m\u00e9todos CSS para centrar un bot\u00f3n horizontalmente. Todas las estrategias son beneficiosas por s\u00ed mismas, dependiendo de su uso y finalidad. Sin embargo, la mejor t\u00e9cnica es hacer uso de la propiedad Flex-box. Y la otra es que elijas el m\u00e9todo que creas m\u00e1s apropiado para tu problema y escenario. <\/p>\n\n
Lee tambi\u00e9n nuestra gu\u00eda sobre: C\u00f3mo centrar un v\u00eddeo en HTML<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Con CSS (Hojas de Estilo en Cascada), puedes dar a una p\u00e1gina web HTML el mejor aspecto posible.…","protected":false},"author":7829,"featured_media":6255,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[706,698],"tags":[],"yoast_head":"\nC\u00f3mo centrar horizontalmente un bot\u00f3n en CSS - Outstanding Themes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo centrar horizontalmente un bot\u00f3n en CSS - Outstanding Themes\" \/>\n<meta property=\"og:description\" content=\"Con CSS (Hojas de Estilo en Cascada), puedes dar a una p\u00e1gina web HTML el mejor aspecto posible.…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Outstanding Themes\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-22T21:23:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-27T21:59:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png\" \/>\n\t<meta property=\"og:image:width\" content=\"917\" \/>\n\t<meta property=\"og:image:height\" content=\"454\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"outstandingthemes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"outstandingthemes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/\",\"url\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/\",\"name\":\"C\u00f3mo centrar horizontalmente un bot\u00f3n en CSS - Outstanding Themes\",\"isPartOf\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png\",\"datePublished\":\"2022-02-22T21:23:51+00:00\",\"dateModified\":\"2024-11-27T21:59:38+00:00\",\"author\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\"},\"breadcrumb\":{\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#primaryimage\",\"url\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png\",\"contentUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png\",\"width\":917,\"height\":454},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/outstandingthemes.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo centrar horizontalmente un bot\u00f3n en CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#website\",\"url\":\"https:\/\/outstandingthemes.com\/es\/\",\"name\":\"Outstanding Themes\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/outstandingthemes.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\",\"name\":\"outstandingthemes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"caption\":\"outstandingthemes\"},\"url\":\"https:\/\/outstandingthemes.com\/es\/author\/outstandingthemes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo centrar horizontalmente un bot\u00f3n en CSS - Outstanding Themes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo centrar horizontalmente un bot\u00f3n en CSS - Outstanding Themes","og_description":"Con CSS (Hojas de Estilo en Cascada), puedes dar a una p\u00e1gina web HTML el mejor aspecto posible.…","og_url":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/","og_site_name":"Outstanding Themes","article_published_time":"2022-02-22T21:23:51+00:00","article_modified_time":"2024-11-27T21:59:38+00:00","og_image":[{"width":917,"height":454,"url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png","type":"image\/png"}],"author":"outstandingthemes","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"outstandingthemes","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/","url":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/","name":"C\u00f3mo centrar horizontalmente un bot\u00f3n en CSS - Outstanding Themes","isPartOf":{"@id":"https:\/\/outstandingthemes.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#primaryimage"},"image":{"@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#primaryimage"},"thumbnailUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png","datePublished":"2022-02-22T21:23:51+00:00","dateModified":"2024-11-27T21:59:38+00:00","author":{"@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a"},"breadcrumb":{"@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#primaryimage","url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png","contentUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png","width":917,"height":454},{"@type":"BreadcrumbList","@id":"https:\/\/outstandingthemes.com\/es\/como-centrar-horizontalmente-un-boton-en-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/outstandingthemes.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo centrar horizontalmente un bot\u00f3n en CSS"}]},{"@type":"WebSite","@id":"https:\/\/outstandingthemes.com\/es\/#website","url":"https:\/\/outstandingthemes.com\/es\/","name":"Outstanding Themes","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/outstandingthemes.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a","name":"outstandingthemes","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/outstandingthemes.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","caption":"outstandingthemes"},"url":"https:\/\/outstandingthemes.com\/es\/author\/outstandingthemes\/"}]}},"_links":{"self":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6253"}],"collection":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/users\/7829"}],"replies":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/comments?post=6253"}],"version-history":[{"count":1,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6253\/revisions"}],"predecessor-version":[{"id":6257,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/posts\/6253\/revisions\/6257"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/media\/6255"}],"wp:attachment":[{"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/media?parent=6253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/categories?post=6253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/outstandingthemes.com\/es\/wp-json\/wp\/v2\/tags?post=6253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}