freeCodeCamp/center-an-element-horizontally-using-the-margin-property.english.md at 36cf2b1ca59103ededeaf39b7dfacb2969ac7f95

Files

Oliver Eyton-Williams f1c9b08cf3 fix(curriculum): add isHidden: false to challenges

This includes certificates (where it does nothing), but does not
include any translations.

2020-05-25 16:25:19 +05:30

1.3 KiB

Raw Blame History

id, title, challengeType, isHidden, videoUrl, forumTopicId

id	title	challengeType	isHidden	videoUrl	forumTopicId
587d78a3367417b2b2512ad0	Center an Element Horizontally Using the margin Property	0	false	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