{"id":74186,"date":"2020-01-17T11:41:31","date_gmt":"2020-01-17T06:11:31","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74186"},"modified":"2024-04-12T14:23:20","modified_gmt":"2024-04-12T08:53:20","slug":"margin-for-horizontal-alignment-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/","title":{"rendered":"Margin for Horizontal Alignment"},"content":{"rendered":"<div>The margin property as discussed can also be used to center or align elements. Different technique are used to align elements in a document by using the combination of the auto keyword with the left or right margin of an element. The margin that is given must be either the left or the right margin, because the auto keyword is ignored when applied to the top or bottom margin.<\/div>\n<div><\/div>\n<div>Horizontal alignment is explained with figure by using keywords as values<\/div>\n<div><strong>Center Aligning<\/strong> &#8211; Block elements can be aligned by setting the left and right margins to &#8220;auto&#8221;. Setting the left and right margins to auto specifies that they should split the available margin equally. It is illustrated and used as<\/div>\n<div><\/div>\n<div>.center<br \/>\n{<br \/>\nmargin-left:auto;<br \/>\nmargin-right:auto;<br \/>\n}<\/div>\n<div><\/div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-59649\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png\" alt=\"Margin for Horizontal Alignment\" width=\"999\" height=\"147\" \/><\/p>\n<div><\/div>\n<div><\/div>\n<div><strong>Left and Right Aligning<\/strong> &#8211; In this method of aligning elements absolute positioning is used.<\/div>\n<div><\/div>\n<div>.left<br \/>\n{<br \/>\nposition: absolute;<br \/>\nmargin-left: 0px;<br \/>\nmargin-right:auto;<br \/>\n}<\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-59650\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-2-1.png\" alt=\"Margin for Horizontal Alignment 2\" width=\"998\" height=\"152\" \/><\/div>\n<div><\/div>\n<div>.right<br \/>\n{<br \/>\nposition: absolute;<br \/>\nmargin-right:0px;<br \/>\nmargin-left:auto;<br \/>\n}<\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-59651\" src=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-3-1.png\" alt=\"Margin for Horizontal Alignment 3\" width=\"1001\" height=\"148\" \/><\/div>\n<div><\/div>\n<div><strong>Aligning In Quirks Mode<\/strong> &#8211;\u00a0 The DOCTYPE and the Document Type Declaration selects the rendering mode of the web page but with legacy browsers a quirks mode is encountered.<br \/>\nIn quirks mode some CSS features do not work which work well in standards mode. Aligning an element using the auto keyword and the margin property does not work in quirks mode especially in Internet Explorer (IE).<\/div>\n<div><\/div>\n<div>A workaround is used by using the text-align property on an element with values of left, center and right as appropriate.<\/div>\n<div>\n<h5 id=\"block-07feabc5-3923-4122-ba70-f7cf1db64a8f\" class=\"block-editor-block-list__block wp-block is-selected rich-text block-editor-rich-text__editable is-hovered wp-block\" tabindex=\"0\" role=\"textbox\" contenteditable=\"true\" aria-label=\"Write heading\u2026\" aria-multiline=\"true\" data-block=\"07feabc5-3923-4122-ba70-f7cf1db64a8f\" data-type=\"core\/heading\" data-title=\"Heading\">Go To-\u00a0<a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong>\u00a0<strong>Tutorial<\/strong><\/a><\/h5>\n<\/div>\n<\/div>\n<div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The margin property as discussed can also be used to center or align elements. Different technique are used to align elements in a document by using the combination of the auto keyword with the left or right margin of an element. The margin that is given must be either the left or the right margin,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[1810],"class_list":["post-74186","page","type-page","status-publish","hentry","category-css3","tag-margin-for-horizontal-alignment"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Margin for Horizontal Alignment - Tutorial<\/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:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Margin for Horizontal Alignment - Tutorial\" \/>\n<meta property=\"og:description\" content=\"The margin property as discussed can also be used to center or align elements. Different technique are used to align elements in a document by using the combination of the auto keyword with the left or right margin of an element. The margin that is given must be either the left or the right margin,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:20+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/\",\"name\":\"Margin for Horizontal Alignment - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png\",\"datePublished\":\"2020-01-17T06:11:31+00:00\",\"dateModified\":\"2024-04-12T08:53:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#primaryimage\",\"url\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png\",\"contentUrl\":\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Margin for Horizontal Alignment\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Margin for Horizontal Alignment - Tutorial","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:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/","og_locale":"en_US","og_type":"article","og_title":"Margin for Horizontal Alignment - Tutorial","og_description":"The margin property as discussed can also be used to center or align elements. Different technique are used to align elements in a document by using the combination of the auto keyword with the left or right margin of an element. The margin that is given must be either the left or the right margin,...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:20+00:00","og_image":[{"url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/","name":"Margin for Horizontal Alignment - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png","datePublished":"2020-01-17T06:11:31+00:00","dateModified":"2024-04-12T08:53:20+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#primaryimage","url":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png","contentUrl":"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/Margin-for-Horizontal-Alignment-4.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/margin-for-horizontal-alignment-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Margin for Horizontal Alignment"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74186"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74186\/revisions"}],"predecessor-version":[{"id":85609,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74186\/revisions\/85609"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}