Div中心对齐不适用于2个浮动元素

Question

我试图将一个div对齐，其中包含属性溢出：隐藏和2个浮动的子元素，位于另一个父容器中。

这是结构 -

<div class="container"> 
  <div class="help"> 
    <div class="icon"></div> 
    <div class="help-text"> 
      <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </div> 
      <div>In aliquet <strong>malesuada faucibus</strong</div> 
    </div> 
  </div> 
</div>


.container{
  background-color: yellow;
  padding: 10px 0;
  text-align: center;
}

.help{
  overflow: hidden;
}

.icon{
  background: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQItU_j6F-zWMlDkRQIhwjnEe9Jm4F-liLYlx1Y6cuLLiqfdGDmdQ) no-repeat;
    width: 50px;
    height: 50px;
    float: left;
}

.help-text{
  float: left;
  text-align: left;
}

这里，div.help里面的内容应该是居中对齐的。 div.icon和div.help-text是浮动的。为了修复浮动，他们的父div.help已经溢出 - 隐藏。

JSBin链接 - http://jsbin.com/tahak/3/

问题是，它始终保持一致。我想中心对齐它。有人可以帮我这个吗？

Answer 1

将display: inline-block添加到以下类：

.help{
  /*overflow: hidden; You can remove this*/
  display: inline-block;/*Add this*/
}

fiddle

Answer 2

实际上，你能简单地描述一下需要集中在哪里吗？你div中的所有内容都会浮动到左边。那么你想要集中在哪里。

------ ---或 你想要这样的东西---

Answer 3

text-align不是解决方案， 首先，你想要居中的div没有定义的宽度，所以它会自动设置为宽度：100％

所以你需要添加     宽度：50％

并使其成为中心    margin：auto;

Answer 4

  

div.help中的内容应该是居中对齐的

如下所示：

<div class="help"> 
   <div class="icon"></div> 
   <div class="help-text"> 
     <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 
     <div>
       In aliquet <strong>malesuada faucibus</strong
     </div> 
   </div> 
</div>

.help内的唯一内容是div.icon和div.help-text。

  

div.icon和div.help-text浮动

所以显然没有别的东西可以在中心对齐。

Answer 5

.help{
  overflow: hidden;
  display:inline-block;
  text-align:center;
}

提示显示：.help块的内联块。

它工作正常。