Почему img не двигается?

Question

Я пытаюсь центрировать элемент в нижнем блоке div, но он остается слева. Вот мой код:

.logo { 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding-bottom: 10px; 
 
} 
 
.logo img { 
 
    box-sizing: padding-box; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
}

<div class="bottom_block"> 
 
    <a class="logo" href="#"> 
 
    <img src="Style/img/logo_uniqa.jpg" alt="logo"> 
 
    </a> 
 
</div>

Как я могу это исправить?

Answer 1

Попробуйте это:

.logo { 
 
    display: block;  
 
    padding-bottom: 10px; 
 
} 
 
.logo img { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div class="bottom_block"> 
 
    <a class="logo" href="#"> 
 
    <img src="http://placehold.it/100x100" alt="logo"> 
 
    </a> 
 
</div>

Answer 2

Попробуйте добавить этот CSS:

.bottom_block{ 
    text-align:center; 
}