Центр Две кнопки с изображениями

Question

Я пытаюсь центрировать две кнопки, но не повезло!

Он также имеет изображение заголовка над кнопками внутри HTML.

Вот мой текущий HTML:

HTML:

<div> 
    <img src=".jpg" style="width:700px;display:block;margin-left:auto;margin-right:auto;" alt=""><div class="nav3" style="height:705px;"> 
    <span class="icons"><a href="https://twitter.com/" class="icons"> 
    <img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a> 
    </span> 
    <a href="https://www.amazon.co.uk/" class="icons"> 
    <img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a> 

</div> 

Answer 1

я пересмотрел свой код и отделить его внутренний стиль от вашего HTML кода.

div { 
 
    text-align: center; 
 
    width: 700px; 
 
} 
 
div img{ 
 
    width:700px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.nav3 img { 
 
    width: 100px; 
 
    display: inline; 
 
}

<div> 
 
    <img src="http://placehold.it/700x260" alt=""> 
 
    <div class="nav3"> 
 
    <a href="https://twitter.com/"><img src="http://placehold.it/640x260" alt=""></a> 
 
    <a href="https://www.amazon.co.uk/"> <img src="http://placehold.it/640x260" alt=""></a> 
 
    </div> 
 
</div>

В настоящее время я установить ширину div в width: 700px; и держатель место также содержит ту же ширину. Измените эту ширину в соответствии с вашими потребностями.