freeCodeCamp/curriculum/challenges/german/01-responsive-web-design/applied-visual-design/center-an-element-horizonta...

1.2 KiB

id title challengeType videoUrl forumTopicId dashedName
587d78a3367417b2b2512ad0 Ein Element mithilfe der Margin-Eigenschaft horizontal zentrieren 0 https://scrimba.com/c/cyLJqU4 301043 center-an-element-horizontally-using-the-margin-property

--description--

Eine weitere Positionierungstechnik ist es, ein Block-Element horizontal zu zentrieren. Beispielsweise, in dem man seine margin auf einen Wert 'auto' setzt.

Diese Methode funktioniert auch für Bilder. Sie sind standardmäßig Inline-Elemente, die in Block-Elemente geändert werden können, indem man die display-Eigenschaft auf block setzt.

--instructions--

Zentriere das div auf dieser Seite, indem du eine margin-Eigenschaft mit einem Wert von auto hinzufügst.

--hints--

Das div sollte eine margin mit einem Wert von auto haben.

assert(new __helpers.CSSHelp(document).getStyle('div')?.margin === 'auto');

--seed--

--seed-contents--

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

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

--solutions--

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