Horizontal centering - Joomla! Documentation

<!DOCTYPE html> <html class="client-nojs" lang="en" dir="ltr"> <head> <meta charset="UTF-8"/> <title>Horizontal centering - Joomla! Documentation</title> <script>document.documentElement.className="client-js";RLCONF={"wgBreakFrames":!1,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"939a1f555b7b32d6743aeae9","wgCSPNonce":!1,"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":!1,"wgNamespaceNumber":0,"wgPageName":"Horizontal_centering","wgTitle":"Horizontal centering","wgCurRevisionId":995404,"wgRevisionId":995404,"wgArticleId":4445,"wgIsArticle":!0,"wgIsRedirect":!1,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Pages with syntax highlighting errors","Tutorials","Template Development","CSS"],"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Horizontal_centering","wgRelevantArticleId":4445,"wgIsProbablyEditable":!1,"wgRelevantPageIsProbablyEditable":!1,"wgRestrictionEdit":[] ,"wgRestrictionMove":[],"wgMediaViewerOnClick":!0,"wgMediaViewerEnabledByDefault":!0,"wgULSAcceptLanguageList":[],"wgULSCurrentAutonym":"English","wgULSPosition":"personal","wgULSisCompactLinksEnabled":!0};RLSTATE={"site.styles":"ready","noscript":"ready","user.styles":"ready","user":"ready","user.options":"loading","ext.pygments":"ready","skins.jforeground.styles":"ready","ext.uls.pt":"ready"};RLPAGEMODULES=["site","mediawiki.page.startup","mediawiki.page.ready","skins.jforeground.js","ext.uls.compactlinks","ext.uls.interface"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.implement("user.options@1hzgi",function($,jQuery,require,module){/*@nomin*/mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); });});</script> <link rel="stylesheet" href="/load.php?lang=en&modules=ext.pygments%7Cext.uls.pt%7Cskins.jforeground.styles&only=styles&skin=jforeground"/> <script async="" src="/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=jforeground"></script> <meta name="ResourceLoaderDynamicStyles" content=""/> <link rel="stylesheet" href="/load.php?lang=en&modules=site.styles&only=styles&skin=jforeground"/> <meta name="generator" content="MediaWiki 1.35.10"/> <meta name="robots" content="noindex,nofollow"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"/> <link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png"/> <link rel="shortcut icon" href="/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch_desc.php" title="Joomla! Documentation (en)"/> <link rel="EditURI" type="application/rsd+xml" href="//docs.joomla.org/api.php?action=rsd"/> <link rel="license" href="/JEDL"/> <link rel="alternate" type="application/atom+xml" title="Joomla! Documentation Atom feed" href="/index.php?title=Special:RecentChanges&feed=atom"/>  </head> <body class="mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Horizontal_centering rootpage-Horizontal_centering skin-jforeground action-view"><div id='navwrapper'>  <div id="top-nav" class="fixed"> <nav id="topnav" class="top-bar top row"> <ul class="title-area"> <li class="name logo"> <a href="/Main_Page"> <img alt="Joomla! Documentation" src="/skins/jforeground/joomla_logo_small.png" style="max-width: 64px;height:auto; max-height:36px; display: inline-block; vertical-align:middle;"></a> </li> <li class="toggle-topbar menu-icon"> <a href="#"><span> </span></a> </li> </ul> <section class="top-bar-section"> <ul id="top-bar-left" class="left"> <li class="has-dropdown active" id="p-sidebar-Joomla"> <a href="#">Joomla!</a> <ul class="dropdown"> <li id="n-sidebar-Main"><a href="https://www.joomla.org"><i class="fa fa-joomla 2x-fa icon"></i>Joomla! Home</a></li> <li id="n-sidebar-What"><a href="https://www.joomla.org/about-joomla.html">What is Joomla?</a></li> <li id="n-sidebar-Benefits"><a href="https://www.joomla.org/core-features.html">Benefits & Features</a></li> <li id="n-sidebar-Leadership"><a href="https://www.joomla.org/about-joomla/the-project.html">Project & Leadership</a></li> <li id="n-sidebar-Trademark"><a href="https://tm.joomla.org">Trademark & Licensing</a></li> <li class="divider"></li> <li id="label"><label>Support Joomla!</label></li> <li id="n-sidebar-Contribute"><a href="https://www.joomla.org/contribute-to-joomla.html">Contribute</a></li> <li id="n-sidebar-Sponsorship"><a href="https://www.joomla.org/sponsor.html">Sponsor</a></li> <li id="n-sidebar-Partner"><a href="https://www.joomla.org/about-joomla/partners.html">Partner</a></li> <li id="n-sidebar-Shop"><a href="https://shop.joomla.org/">Shop</a></li> </ul> </li> <li class="has-dropdown active" id="p-sidebar-Extend"> <a href="#">Download & Extend</a> <ul class="dropdown"> <li id="n-sidebar-JoomlaCode"><a href="https://downloads.joomla.org/">Downloads</a></li> <li id="n-sidebar-Extensions"><a href="https://extensions.joomla.org/">Extensions</a></li> <li id="n-sidebar-Translations"><a href="https://community.joomla.org/translations.html">Languages</a></li> <li id="n-sidebar-Free-Hosted"><a href="https://launch.joomla.org">Get a free site</a></li> </ul> </li> <li class="has-dropdown active" id="p-sidebar-About"> <a href="#">Discover & Learn</a> <ul class="dropdown"> <li id="n-sidebar-Docs"><a href="https://docs.joomla.org">Documentation</a></li> <li id="n-sidebar-Training"><a href="https://training.joomla.org">Training</a></li> <li id="n-sidebar-Certification"><a href="https://certification.joomla.org/">Certification</a></li> <li id="n-sidebar-Showcase"><a href="https://showcase.joomla.org/">Site Showcase</a></li> <li id="n-sidebar-Announcements"><a href="https://www.joomla.org/announcements.html">Announcements</a></li> <li id="n-sidebar-Blogs"><a href="https://community.joomla.org/blogs.html">Blogs</a></li> <li id="n-sidebar-Magazine"><a href="https://magazine.joomla.org/">Magazine</a></li> </ul> </li> <li class="has-dropdown active" id="p-sidebar-News"> <a href="#">Community & Support</a> <ul class="dropdown"> <li id="n-sidebar-Community"><a href="https://community.joomla.org/">Community Portal</a></li> <li id="n-sidebar-Events"><a href="https://events.joomla.org/">Events</a></li> <li id="n-sidebar-JUGs"><a href="https://community.joomla.org/user-groups.html">User Groups</a></li> <li id="n-sidebar-Forum"><a href="https://forum.joomla.org/">Forum</a></li> <li id="n-sidebar-Resources"><a href="https://resources.joomla.org/">Resources Directory</a></li> <li id="n-sidebar-Volunteers"><a href="https://volunteers.joomla.org/">Volunteers Portal</a></li> <li id="n-sidebar-Vel"><a href="https://vel.joomla.org">Vulnerable Extensions List</a></li> </ul> </li> <li class="has-dropdown active" id="p-sidebar-Developers"> <a href="#">Developer Resources</a> <ul class="dropdown"> <li id="n-sidebar-Developers"><a href="https://developer.joomla.org/">Developer Network</a></li> <li id="n-sidebar-Security"><a href="https://developer.joomla.org/security-centre.html">Security Centre</a></li> <li id="n-sidebar-Issues"><a href="https://issues.joomla.org/">Issue Tracker</a></li> <li id="n-sidebar-Github"><a href="https://github.com/joomla">GitHub</a></li> <li id="n-sidebar-API"><a href="https://api.joomla.org/">API Documentation</a></li> <li id="n-sidebar-Framework"><a href="https://framework.joomla.org/">Joomla! Framework</a></li> <li id="n-sidebar-JoomlaCode"><a href="http://joomlacode.org/">JoomlaCode</a></li> </ul> </li> </ul> <ul id="top-bar-right" class="right"> <li class="has-dropdown active"><a href="#"><i class="fa fa-cogs"></i></a> <ul id="toolbox-dropdown" class="dropdown"> <li id="t-whatlinkshere"><a href="/Special:WhatLinksHere/Horizontal_centering" title="A list of all wiki pages that link here [j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked"><a href="/Special:RecentChangesLinked/Horizontal_centering" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li><li id="t-specialpages"><a href="/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q">Special pages</a></li><li id="t-print"><a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">Printable version</a></li><li id="t-permalink"><a href="/index.php?title=Horizontal_centering&oldid=995404" title="Permanent link to this revision of the page">Permanent link</a></li><li id="t-info"><a href="/index.php?title=Horizontal_centering&action=info" title="More information about this page">Page information</a></li> <li id="n-recentchanges"><a href="/Special:RecentChanges" title="Special:RecentChanges">Recent changes</a></li> <li id="n-help" ><a href="/S:MyLanguage/Help:Contents">Help</a></li> </ul> </li> <li> <a href="/index.php?title=Special:UserLogin&returnto=Horizontal+centering&returntoquery=oldid%3D995404">Log in</a> </li> </ul> </section> </nav> </div> <div id="global-header"> <nav class="global-header"> <div class="row"> <div class="large-6 column"> <h1 class="page-title"> <a href="/Main_Page"> <div class="title-name" style="display: inline-block;">Joomla! Documentation<sup>™</sup></div> </a> </h1> </div> <div class="large-6 column hide-for-small"> <ul class="button-group pull-right"> <li><a href="https://downloads.joomla.org/" class="button success radius" target="_blank">Download</a></li> <li><a href="https://launch.joomla.org/" class="button top radius" target="_blank">Launch</a></li> </ul> </div> </div> </nav> </div> <div id="bottom-nav"> <nav id="bottomnav" class="top-bar bottom row"> <ul class="title-area"> <li class="name"> <h1 class="title-name-small"> <a href="/Main_Page"> <div class="title-name" style="display:none;">Joomla! Documentation<sup>™</sup></div> </a> </h1> </li> <li class="toggle-topbar menu-icon"> <a href="#"><span></span></a> </li> </ul> <section class="top-bar-section"> <ul id="top-bar-left" class="left"> <li class="has-dropdown active" id='p-Learn'> <a href="#">Learn</a> <ul class="dropdown"> <li id="n-More-About-Joomla.21"><a href="/Special:MyLanguage/Portal:Learn_More">More About Joomla!</a></li><li id="n-Beginners"><a href="/Portal:Beginners">Beginners</a></li><li id="n-Administrators"><a href="/Portal:Administrators">Administrators</a></li><li id="n-Developers"><a href="/Portal:Developers">Developers</a></li><li id="n-Joomla.21-Get-Involved"><a href="/Portal:Participating_in_the_Community">Joomla! Get Involved</a></li><li id="n-Joomla.21-Code-Contributors"><a href="/Portal:Joomla!_Code_Contributors">Joomla! Code Contributors</a></li><li id="n-Joomla-User-Groups"><a href="/Special:MyLanguage/Portal:Joomla_User_Groups">Joomla User Groups</a></li> </ul> <li class="has-dropdown active" id='p-Browse'> <a href="#">Browse</a> <ul class="dropdown"> <li id="n-CMS-Help-Screens"><a href="/Help_screens">CMS Help Screens</a></li><li id="n-Our-Docs"><a href="/Category:Top_Level">Our Docs</a></li><li id="n-Our-Glossary"><a href="/Glossary">Our Glossary</a></li><li id="n-The-Joomla.21-FAQs"><a href="/Category:FAQ">The Joomla! FAQs</a></li><li id="n-Tips-and-tricks"><a href="/Category:Tips_and_tricks">Tips and tricks</a></li><li id="n-Recent-Changes"><a href="/Special:RecentChanges">Recent Changes</a></li> </ul> <li class="has-dropdown active" id='p-Help'> <a href="#">Help</a> <ul class="dropdown"> <li id="n-Contribute-to-Joomla.21-Docs"><a href="/JDOC:How_to_Contribute_to_Joomla!_Documentation">Contribute to Joomla! Docs</a></li><li id="n-Translate-Joomla.21-Docs"><a href="/JDOC:Documentation_Translators">Translate Joomla! Docs</a></li><li id="n-Editing-Help"><a href="/JHelp:Cheatsheet">Editing Help</a></li><li id="n-Play-in-the-Sandbox"><a href="/Sandbox">Play in the Sandbox</a></li><li id="n-JDOC.27s-Policies"><a href="/JDOC:Wiki_policy">JDOC's Policies</a></li><li id="n-Documentation-License"><a href="/JEDL">Documentation License</a></li><li id="n-More-Help"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents" rel="nofollow" target="_blank">More Help</a></li> </ul> </ul> <ul id="top-bar-right" class="right"> <li class="has-form"> <form action="/index.php" id="searchform" class="mw-search"> <div class="row"> <div class="small-12 columns"> <input type="search" name="search" placeholder="Search Joomla! Documentation" title="Search Joomla! Documentation [f]" accesskey="f" id="searchInput"/> <button type="submit" class="button search main">Search</button> </div> </div> </form> </li> </ul> </section> </nav> </div> </div> <div id="page-content"> <div class="row"> <div class="large-12 columns">   <div class="mw-indicators mw-body-content"> </div>  </div> </div> <div id="mw-js-message" style="display:none;"></div> <div class="row"> <div id="p-cactions" class="large-12 columns"> <article id="content"> <h1 class="title">Horizontal centering</h1> <h3 id="tagline">From Joomla! Documentation</h3> <h5 class="subtitle"><div class="mw-revision warningbox"><div id="mw-revision-info">Revision as of 22:05, 25 November 2022 by <a href="/index.php?title=User:Cmb&action=edit&redlink=1" class="new mw-userlink" title="User:Cmb (page does not exist)"><bdi>Cmb</bdi></a> <span class="mw-usertoollinks">(<a href="/index.php?title=User_talk:Cmb&action=edit&redlink=1" class="new mw-usertoollinks-talk" title="User talk:Cmb (page does not exist)">talk</a> | <a href="/Special:Contributions/Cmb" class="mw-usertoollinks-contribs" title="Special:Contributions/Cmb">contribs</a>)</span> <span class="comment">(Several markup, spelling and capitalization changes.)</span></div><div id="mw-revision-nav">(<a href="/index.php?title=Horizontal_centering&diff=prev&oldid=995404" title="Horizontal centering">diff</a>) <a href="/index.php?title=Horizontal_centering&direction=prev&oldid=995404" title="Horizontal centering">← Older revision</a> | Latest revision (diff) | Newer revision → (diff)</div></div></h5> <div id="ad"> <script async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=joomlaorg" id="_carbonads_js"></script> </div> <div class="clear_both"></div> <div class="mw-bodytext"> <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><div class="mw-parser-output"><div class="mw-parser-output"><p>Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering. </p><p>For the first example, let's say you have a horizontal menu at the top of your page that you want centered in your layout. You would do it with a block of code in the linked CSS file: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#horz_menu { margin: auto; width: 800px; height: 25px; }</pre></div> <p>The <i>auto</i> value in the <i>margin</i> attribute centers the item, so this would create a menu area that is 800 pixels wide and 25 pixels tall and would be centered in whatever space it is placed in. </p><p>If you need to add some margin space above and below the menu and still keep it centered you would adjust the code: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#horz_menu { margin: 20px auto 20px auto; width: 800px; height: 25px; }</pre></div> <p>This would add 20 pixels of space on the top and bottom of the menu while keeping the left and right margin in a centered mode. </p><p>The second example is when you simply want to center text, in which case you just add the <i>text-align</i> code. </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#horz_menu a { padding: .75em 0 .52em 0; font-size: 0.8em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }</pre></div> <p>This would cause any links within the <i>horz_menu</i> div tag of the HTML code to be centered in the horizontal menu. They would also have <i>.75em</i> of padding above and <i>.52em</i> of padding below them. </p><p>These same techniques work for the overall page layout as well. Let's say you want the shell content area of your page to be 900 pixels wide and to be centered on the page and that you want the headline to be centered within it. Your CSS code would look like this: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#page_container { margin: auto; width: 900px; background-color: #FFFFFF; border: 1pt solid #660000; }</pre></div> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#page_container h1 { margin: 50px 0 20px 0 ; font-size: 1.25em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }</pre></div> <p>This would create a page that has a main content box centered in the browser window with a white background and a brown border. </p><p>Any text inside a <i>h1</i> tag that is inside the <i>page_container</i> div tag in the HTML code of the page would also be centered inside that main content box. </p><p>Of course the example above is simplified for demonstration and you would have more structure involved (left column, right column, etc). </p><p>So as you can see, horizontal centering for structural items is achieved with the <i>margin</i> attribute whereas horizontal centering for text items is achieved using the <i>text-align</i> attribute. </p>    </div></div></div><div class="printfooter"> Retrieved from "<a dir="ltr" href="https://docs.joomla.org/index.php?title=Horizontal_centering&oldid=995404">https://docs.joomla.org/index.php?title=Horizontal_centering&oldid=995404</a>"</div> <div class="clear_both"></div> </div> <div class="group"><div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/Category:Pages_with_syntax_highlighting_errors" title="Category:Pages with syntax highlighting errors">Pages with syntax highlighting errors</a></li><li><a href="/Category:Tutorials" title="Category:Tutorials">Tutorials</a></li><li><a href="/Category:Template_Development" title="Category:Template Development">Template Development</a></li><li><a href="/Category:CSS" title="Category:CSS">CSS</a></li></ul></div></div></div> </article> </div> </div> <footer class="row"> <div id="footer"> <div id="footer-left" class="large-8 small-12 columns"> <ul id="footer-left"> <li id="footer-lastmod"> This page was last edited on 25 November 2022, at 22:05.</li> <li id="footer-copyright">Content is available under <a href="/JEDL" title="JEDL">Joomla! EDL</a> unless otherwise noted.<br>Joomla!<sup>®</sup> is a registered trademark of Open Source Matters, Inc.<br>If you are experiencing technical issues with this website, <html><a href="https://github.com/joomla/joomla-websites/issues/new?title=%5Bjdocs%5D%20&body=Please%20describe%20the%20problem%20or%20your%20issue" target="_blank" rel="nofollow">please report it</a></html>. <br>Notice a content problem? <html><a href="/JDOC:How_to_Contribute_to_Joomla!_Documentation" rel="nofollow">Create an account</a></html> and fix it.</li> <li id="footer-privacy"><a href="/JDOC:Privacy_policy" title="JDOC:Privacy policy">Privacy policy</a></li> <li id="footer-about"><a href="/JDOC:About" title="JDOC:About">About Joomla! Documentation</a></li> <li id="footer-disclaimer"><a href="/JDOC:General_disclaimer" class="mw-redirect" title="JDOC:General disclaimer">Terms of Service</a></li> </ul> </div> <div id="footer-right-icons" class="large-4 small-12 columns"> <ul id="poweredby"> <li class="copyright"> <a href="https://docs.joomla.org/JEDL" target="_blank"><img src="https://docs.joomla.org/skins/JEDL_icon.png" alt="Joomla! EDL" width="88" height="31" loading="lazy"/></a> </li> <li class="poweredby"> <a href="https://www.mediawiki.org/" target="_blank"><img src="/resources/assets/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/resources/assets/poweredby_mediawiki_132x47.png 1.5x, /resources/assets/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"/></a> </li> <li class="rochen"> <a href="https://www.rochen.com/joomla-hosting" target="_blank"><img src="//cdn.joomla.org/rochen/rochen_footer_logo_white.png" alt="Joomla! Hosting by Rochen..." width="88" height="31" loading="lazy"/></a> </li> </ul> </div> </div> </footer> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgPageParseReport":{"limitreport":{"cputime":"0.037","walltime":"1.071","ppvisitednodes":{"value":16,"limit":1000000},"postexpandincludesize":{"value":0,"limit":2097152},"templateargumentsize":{"value":0,"limit":2097152},"expansiondepth":{"value":2,"limit":40},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":1281,"limit":5000000},"timingprofile":["100.00% 0.000 1 -total"]},"cachereport":{"timestamp":"20241217132012","ttl":86400,"transientcontent":false}}});mw.config.set({"wgBackendResponseTime":236});});</script> </body> </html>

CINXE.COM

Horizontal centering - Joomla! Documentation