как вывести плавающее изображение в центр

Question

так что я в основном кодирую свой сайт. Я сделал контейнер, где текст плавает влево, а изображение справа. Я установил минимальную ширину для текста, чтобы он стал отзывчивым. Размер изображения также отзывчивый. Как только ширина экрана становится меньше, изображение попадает под текст, но не в центр. Я пытался использовать поле: 0 авто; но это тоже не помогло.

.container {
  width: 88%;
  margin: auto;
  overflow: hidden;
}


/* showcase */

#showcase h1 {
  margin: 0;
}

#text {
  width: 60%;
  float: left;
  min-width: 300px;
}

#pic {
  width: 40%;
  float: right;
}

#pic img {
  width: 100%;
}

<section id="showcase">
  <div class="container">
    <div id="text">
      <h1> dummy text </h1> <button class="button_1">Kontakt</button> </div>
    <div id="pic"> <img class="mypic" src="./img/menew.png"> </div>
  </div>
</section>

Answer 1

Используйте flex вместо плавания в вашем контейнере, вы получите лучший ответ от него

.container {
  width: 88%;
  overflow: hidden;
  display: flex;
}

/* showcase */
#showcase h1 {
  margin: 0;
}

#text {
  min-width: 300px;
}

#pic {
  width: 40%;
}
#pic img {
  width: 100%;
}

Теперь вы можете изменить ширину вашего #text div, чтобы разместить там, где вы хотите элементы

Медиа-запрос в ответ на запрос

@media (max-width: 750px) {
  .container {
    display: block;
  }
}

Answer 2

Я удалил # pi c float и добавил автоматическое поле + минимальная ширина

#pic{
width: 40%;
min-width: 300px;
margin: 0 auto;
}

и сделал медиа-запрос:

@media (min-width: 600px) {
    #pic {
        float: right;
    }
}