freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.english.md

id	title	challengeType	videoUrl
587d78a3367417b2b2512ad0	Center an Element Horizontally Using the margin Property	0	https://scrimba.com/c/cyLJqU4

Description

Another positioning technique is to center a block element horizontally. One way to do this is to set its margin to a value of auto. This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display property to block.

Instructions

Center the div on the page by adding a margin property with a value of auto.

Tests

tests:
  - text: The <code>div</code> should have a <code>margin</code> set to auto.
    testString: assert(code.match(/margin:\s*?auto;/g), 'The <code>div</code> should have a <code>margin</code> set to auto.');

Challenge Seed

<style>
  div {
    background-color: blue;
    height: 100px;
    width: 100px;

  }
</style>
<div></div>

Solution

var code = "div {background-color: blue; height: 100px; width: 100px; margin: auto;}"