freeCodeCamp/center-an-element-horizontally-using-the-margin-property.md at 0dba9c1036d5029df022836368e56a1201d62de9

Files

Oliver Eyton-Williams 2b9e38a17b fix: replace .english.md extension with .md

2020-09-29 22:09:04 +02:00

1.3 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

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

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));

Challenge Seed

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

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

Solution

<style>
  div {
    background-color: blue;
    height: 100px;
    width: 100px;
    margin: auto;
  }
</style>
<div></div>

1.3 KiB Raw Blame History