Having Issues With Vertical Alignment (flexbox) And Center Alignment

I'm using javascript to display dynamic text and image, but having trouble with formatting. I'm using display: flex to put text and image next to each other, but am having trouble

Solution 1:

See example below using flex CSS. First section with image, second section with no images in .images div.

There is a lot to explain with flex, but it is super powerful when it comes to dynamic layout. Hope this gets you on the right track.

Also you need to relax on your id attribute usage, valid html only allow single usage of an id attribute value. Use class attribute for multiple instances, and id for single usage instances.

id attribute value should only ever be used once, never multiple times.

BODY {
  padding: 1rem;
  margin: 0;
}

SECTION.container {
  border: 1px black solid;
  padding: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: initial;
  min-height: 100px;
  justify-content: center;
  margin-bottom: 1rem;
}

SECTION.container.hero-text {
  width: 50%;
  background: cyan;
}

SECTION.container.images {
  width: 50%;
  background: red;
}

SECTION.container.imagesIMG {
  display: block;
  width: 100%;
}

<section><divclass="container"><divclass="hero-text"><divclass="text-fixed">I'm a fixed text</div><divclass="text">And I am loving life :)</div></div><divclass="images"><imgsrc="https://i.imgur.com/q5Y5RCH.png"alt="" /></div></div></section><section><divclass="container"><divclass="hero-text"><divclass="text-fixed">I'm a fixed text</div><divclass="text">And I am loving life :)</div></div><divclass="images"><!-- no images --></div></div></section>