Resposive элемент div внутри другого элемента div

Question

У меня есть два элемента div внутри основного элемента div. Я хочу, чтобы эти два элемента div плавали влево и выравнивали центр основного элемента div. Примерно так.

[ main div        [div1][div2]       ]

Я успешно разместил два элемента div, но мне не удается назначить пространство с обеих сторон. Я хочу сказать, выровняйте их по центру. код для перемещения слева css

.container{
    width:100%
    height: auto;
} 

.img{
    width:auto;
    height:auto;
    float:left;
}
.data{
    width:auto;
    height:auto;
}

html code
<div class="container">
    <div class="img"> image goes here</div>
    <div class="data">data goes here</div>
</div>

Answer 1

если вы напишите text-align: center to parent. Он выровняет своих детей

спасибо за комментарии

.container{
    width:100%
    height: auto;
    text-align:center;
} 

.data{
    width:auto;
    height:auto;
}

<div class="container">
    <div class="img"><img src="https://picsum.photos/200/300"/></div>
    <div class="data">data goes here</div>
</div>

Answer 2

Вы можете обернуть img и div данных в div, а затем переместить этот div на 50% ширины. Я предпочитаю не использовать поплавки;На мой взгляд, лучше выбрать flexbox, но если вам нравятся плавающие числа, я приведу ниже код, который вы можете попробовать.

HTML:

    <div class="container">
      <div class="dataImgContainer">
        <div class="img"> image goes here</div>
        <div class="data">data goes here</div>
      </div>
    </div>

Добавьте ниже в таблицу CSS:

.dataImgContainer {
   width: 50%;
   float: right;
 }