title: Having issues with vertical alignment (Flexbox) and center alignment
body: <p>I'm using javascript to display dynamic text and image, but having trouble with formatting.</p>
  <ol>
  <li>I'm using display: flex to put text and image next to each other, but am having trouble horizontally aligning them. Right now, it looks like:</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/G9O9w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G9O9w.png" alt="enter image description here" /></a></p>
  <p>But I'd like to horizontally align them so that it becomes:</p>
  <p><a href="https://i.stack.imgur.com/YT5tV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YT5tV.png" alt="enter image description here" /></a></p>
  <p>I've tried the following,  but this didn't work</p>
  <pre><code>  #conA #container {
      display: flex;
        flex-direction: row;    
      justify-content: center; 
      align-items: center;   
    } 
  </code></pre>
  <p>Update:</p>
  <p>Implementing the following code but NOT setting the height of #heroText and #images the same</p>
  <pre><code>  #conA #container {
          display: flex;
            flex-direction: row;    
          justify-content: center; 
          align-items: center;   
        } 
  </code></pre>
  <p>does center text and images horizontally when both are present. However, once the images disappear, the text jumps. Here's how it's behaving   <a href="https://imgur.com/a/7yYl8zO" rel="nofollow noreferrer">https://imgur.com/a/7yYl8zO</a>   I'd like the text to not move when images disappear</p>
  <p>Once I set the heights of #heroText and #images the same, it then turns to this:
  <a href="https://i.stack.imgur.com/OONFk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OONFk.png" alt="enter image description here" /></a></p>
  <ol start="2">
  <li><p>I'm also looking to center the whole text+image in the parent div (#conA, which takes up full screen 100vh).  I tried the following:</p>
  <pre><code>  #conA  {
    position: relative;  
     }
  
     #conA #container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     }
  </code></pre>
  </li>
  </ol>
  <p>But it looks odd b/c text keeps moving/jumping depending on whether there's an image displayed.
  So when there's no image, it looks like:</p>
  <p><a href="https://i.stack.imgur.com/PJZcu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PJZcu.png" alt="enter image description here" /></a></p>
  <p>When when images appear, text moves to left so that the whole thing becomes centered:</p>
  <p><a href="https://i.stack.imgur.com/u5DJN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u5DJN.png" alt="enter image description here" /></a></p>
  <p>How can I fix the position of text here? I'd like the whole thing is centered when there's an image. So when there's no image:</p>
  <p><a href="https://i.stack.imgur.com/1Sjcg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Sjcg.png" alt="enter image description here" /></a></p>
  <p>When there's an image:</p>
  <p><a href="https://i.stack.imgur.com/ATIJ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ATIJ1.png" alt="enter image description here" /></a></p>
  <p>html</p>
  <pre><code>&lt;section id=&quot;conA&quot;&gt;
  &lt;div id=&quot;container&quot;&gt;
    &lt;div id=&quot;heroText&quot;&gt;
      &lt;div id=&quot;text-fixed&quot;&gt;I'm a fixed text&lt;/div&gt;
      &lt;div id=&quot;text&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;images&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>css</p>
  <pre><code>#conA {
    height: 100vh;
    position: relative;
  }
  
  
  #conA #container {
    margin: 0;
  }
  
  
  #conA #text {
    display: initial;
    border-right: 3px solid #56525E;
  }
  
  
    #heroText {
    line-height: 1.7;
    font-size: 30px;
    width: 800px;
    }
  
  
    #conA #container {
      margin: 0;
      display: flex;
    }
  
    #heroText {
      height: 400px;
    }
  
  
    #conA #images {
      height: 400px;
  } 
  
  
  
  #conA img
  {
    display:none;
    height: 400px;
  }
  
  #conA img.invisible
  {
    visibility: hidden;
  }
  
  #conA img.show
  {
    display:inline;
  }
  
  #conA img.anim1
  {
    animation-duration: 2000ms;
  }
  
  #conA img.anim2
  {
    animation-duration: 2000ms;
  }
  
  #conA img.anim3
  {
    animation-duration: 2000ms;
  }
  
  
  .fadeIn
  {
    animation-name: fadeIn;
  }
  
  @keyframes fadeIn 
  {
   0% {opacity: 0;}
   100% {opacity: 1;}
  }
  
  .fadeOut
  {
    animation-name: fadeOut;
  }
  </code></pre>
  <p>javascript code for dynamic display of text and image</p>
  <pre><code>// List of sentences
  var _CONTENT = [ &quot;I'm the first sentence.&quot;, &quot;I'm the second sentence.&quot;
  , &quot;I'm the third sentence.&quot;, &quot;I'm the fourth sentence.&quot; ];
  
  
  var IMAGE_URLS = ['img/image1.png', 'img/image2.jpg', 'img/image3.png', 'img/image1.png','img/image2.png','img/image3.png', 'img/image4.png','img/image5.png'];
  
  var IMAGES = jQuery.map(IMAGE_URLS, function (url, index){ 
    var img = document.createElement('img'); 
    img.setAttribute('src', url); 
    img.classList.add('anim'+((index%2)+1)); 
    img.classList.add('fadeOut'); 
    document.getElementById('images').appendChild(img); 
    return img;
  }); 
  
  // Current sentence being processed
  var _PART = 0;
  
  // Character number of the current sentence being processed 
  var _PART_INDEX = 0;
  
  // Holds the handle returned from setInterval
  var _INTERVAL_VAL;
  
  // Element that holds the text
  var _ELEMENT = document.querySelector(&quot;#text&quot;);
  
  // Implements typing effect
  function Type() { 
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;
  
    // If full sentence has been displayed then start to delete the sentence after some time
    if(text === _CONTENT[_PART]) {
  
    var imgIndexBase = _PART*2;
      IMAGES[imgIndexBase].classList.remove('fadeOut');
      IMAGES[imgIndexBase+1].classList.remove('fadeOut');
      setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
      setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);
      setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
      setTimeout(function () { IMAGES[imgIndexBase].classList.remove('fadeOut'); }, 3000);
      setTimeout(function () { IMAGES[imgIndexBase].classList.remove('show'); }, 3000);
      setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeIn'); }, 0);
      setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('show'); }, 0);
      setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeOut'); }, 2000);
      setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('fadeOut'); }, 3000);
      setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('show'); }, 3000);
  
  
  
  
      clearInterval(_INTERVAL_VAL);
      setTimeout(function() {
        _INTERVAL_VAL = setInterval(Delete, 50);
      }, 4000);
  
    }
  }
  
  
  
  
  // Implements deleting effect
  function Delete() {
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;
  
    // If sentence has been deleted then start to display the next sentence
    if(text === '') {
   
  
  
      clearInterval(_INTERVAL_VAL);
  
      // If last sentence then display the first one, else move to the next
      if(_PART == (_CONTENT.length - 1))
        _PART = 0;
      else
        _PART++;
      _PART_INDEX = 0;
  
      // Start to display the next sentence after some time
      setTimeout(function() {
        _INTERVAL_VAL = setInterval(Type, 100);
      }, 500);
    }
  }
  
  // Start the typing effect on load
  _INTERVAL_VAL = setInterval(Type, 100);
  </code></pre>