Javascript 其他div元素中的responsive div元素

我在主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>

.container{
宽度：100%
高度：自动；
} 
.img{
宽度：自动；
高度：自动；
浮动：左；
}
.数据{
宽度：自动；
高度：自动；
}
html代码
图片在这里
数据在这里

如果您将文本对齐：居中到父级。它将对齐其子级

谢谢你的评论

.container{
宽度：100%
高度：自动；
文本对齐：居中；
} 
.数据{
宽度：自动；
高度：自动；
}

数据在这里

您可以将img和data div包装在一个div中，然后将该div向右浮动50%的宽度。我不喜欢使用浮动；在我看来，flexbox是一个更好的选择，但是如果你喜欢浮动，我在下面放了一些代码，你可以试试

HTML:

---

您是否尝试过使用

文本对齐：居中.img

css类上的code>？是的。但是这是一个很好的文本，我想把div对齐，比如@King11是的，我试过了，但没有用。我们正在寻找能提供一些解释和上下文的长答案。不要只给出一行代码的答案；解释为什么你的答案是正确的，最好是引用。不包含解释的答案可能会被删除。@Paulie_D

我们正在寻找提供一些解释和上下文的长答案

同意需要解释和上下文的答案，但不是长部分。有时简短的回答就足够了。在某些情况下甚至比长答案更好。这里没有任何解释……更不用说“简短”的解释了。我甚至不确定它是否满足OPs要求，因为

数据
div在
img
div的下方而不是右侧。。。
    <div class="container">
      <div class="dataImgContainer">
        <div class="img"> image goes here</div>
        <div class="data">data goes here</div>
      </div>
    </div>

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