Центр 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; 
} 

Класс Col-LG-4 приходят от bootsrap. Ну, я хочу, чтобы центр знака внутри контейнера значков, а также значок h1 внутри значка. Надеюсь, вы понимаете.

С кодом выше значок div не центрируется в значке-контейнере div. Важно, чтобы я не изменял ширину и высоту двух div.

Answer 1

margin: 0 auto - просто используйте margin:0 auto; Это будет работать для центрирования многих вещей! Удачи.

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

Вам нужно только добавить «Маржа: авто;» css значка classe, и если он не работает, я рекомендую использовать «идентификаторы (id)», которые Bootstrap сохранил многие классы, которые могут запутать систему. .Icon {маржа: автоматическая;}

Answer 4

Вы можете использовать это в загрузчике:

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

Answer 5

Надеется, что это работает :)

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

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