VS Code question

I´m designing something that requires text vertically aligned with an image and both elements centered.

When I design it in VS Code, the text sits below the image on the left side of the screen. However, when I copy and paste this code to CodePen, everything is centered and the text and image are vertically aligned.

I don´t know why there´s such a difference. I´m posting my code as it is in CodePen below. If anyone can help me understand why the design would look so different in these different formats, I´d appreciate it.

https://codepen.io/bananahair/pen/ExRWLZR

Hello there.

Some things to note when using CodePen:

  1. CodePen does not expect any content outside the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

1 Like