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写入父级，则会对齐其子级

感谢您的评论

.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和data div包装在div中，然后以50％的宽度将该div浮动。我不想使用浮点数；我认为flexbox会是更好的选择，但是如果您喜欢float，可以在下面放置一些代码来尝试。

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;
 }

div元素位于其他div元素内

2 个答案: