div中的div

Question

我搜索了很多，但我找不到任何解决方案。

这是我的HTML代码：

<div class="col-lg-4">
   <div class="icon-container">
      <div class="icon">
          <h1>10C</h1>
      </div>                    
   </div>
     <h2>text</h2>
</div>

..在这里css：

.icon-container{
    height:160px; 
    width:160px;    
    display:inline-block;
}

.icon{
    background: url(image/template.png);
    height:140px; 
    width:140px;
    border-radius: 50%;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
}

.icon h1{
    color: white;
}

class col-lg-4来自bootsrap。 好吧，我想将图标类放在icon-container中，图标h1也放在图标内。 我希望你明白。

使用上面的代码，div图标不会居中于div icon-containter。重要的是我不要修改两个div的宽度和高度。

Answer 1

希望这有效：）

＆＃13;

＆＃13;

.icon-container{
    height:160px; 
    width:160px;    
    display:inline-block;
  
    border:3px solid black;
     position:relative;
}

.icon{
    background: url(image/template.png);
    height:140px; 
    width:140px;
    border-radius: 50%;
    cursor: pointer;
     vertical-align: middle;
  
  
    border:2px solid black;
    text-align:center;
    position:relative;
    margin:auto;
    margin-top:8px;
    
   
}

.icon h1{
    color: black;
}

＆＃13;

<div class="col-lg-4">
   <div class="icon-container">
      <div class="icon">
          <h1><br />Text1</h1>
      </div>                    
   </div>
     <h2>Text2</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.icon-container{
    height:160px; 
    width:160px;    
    display:inline-block;
}

.icon{
    background: url(image/template.png);
    height:140px; 
    width:140px;
    border-radius: 50%;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.icon h1{
    color: white;
    text-align: center;
}

另外请不要使用color: white，快速Google会向您显示某些浏览器可能有某些颜色定义，例如blue在某些浏览器中可能会有所不同。对于white，情况并非如此，但仍然存在。

Answer 3

您可以在bootstrap中使用它：

<div class="col-lg-4">
   <div class="icon-container">
      <div class="icon center">
          <h1>10C</h1>
      </div>                    
   </div>
     <h2>text</h2>
</div>

Answer 4

您只需要添加＆＃34;保证金：自动;＆＃34; classe图标的CSS，如果它不起作用，我建议使用＆＃34;标识符（id）＆＃34; Bootstrap已经保存了许多可能使系统混乱的类。 .icon {margin：auto;}

Answer 5

margin: 0 auto - 只需使用margin:0 auto;这可以用于集中很多事情！祝你好运。