Выровнять несколько изображений и текст по горизонтали

Question

Я искал и попробовал несколько разных предложений для этого, но ничего не работает.

Я пытаюсь горизонтально центрировать 3 изображения с надписью внизу. Довольно новый для CSS. Заранее спасибо за помощь!

#container { 
 
    margin: auto; 
 
    width: 1190px; 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    text-align: center; 
 
} 
 
.box { 
 
    display: block; 
 
    margin: 0px; 
 
    white-space: nowrap; 
 
} 
 
.box img { 
 
    display: inline-block; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
} 
 
.box p { 
 
    position: relative; 
 
    width: 100%; 
 
    top: 12px; 
 
    z-index: 2; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
    left: 15px; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.wrapper { 
 
    margin: 0 auto; 
 
    padding: 0 10px; 
 
    width: 1190px; 
 
}

L: 
 
<div id="container"> 
 
    <div class="wrapper"> 
 
    <h3>Heading Here</h3> 
 
    </div> 
 

 
    <div class="box"> 
 

 
    <a href="#"> 
 
     <img src="images/features-icon-1.png" alt=" "> 
 
     <p>Option 1</p> 
 
    </a> 
 

 
    <a href="#"> 
 
     <img src="images/features-icon-2.png" alt=" "> 
 
     <p>Option 2</p> 
 
    </a> 
 

 
    <a href="#"> 
 
     <img src="images/features-icon-3.png" alt=" "> 
 
     <p>Option 3</p> 
 
    </a> 
 

 
    </div> 
 

 
    <div class="clear"></div> 
 
</div>

Answer 1

Вы просто не хватает контейнера обертку для вашего контента.

Я добавил div, чтобы обернуть ваше изображение, текст & ссылка.

изменения Также .box img в .box div

Это все, что вы пропали без вести.

#container { 
 
    margin: auto; 
 
    width: 1190px; 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    text-align: center; 
 
} 
 
.box { 
 
    display: block; 
 
    margin: 0px; 
 
    white-space: nowrap; 
 
} 
 
.box div { 
 
    display: inline-block; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
} 
 
.box p { 
 
    position: relative; 
 
    width: 100%; 
 
    top: 12px; 
 
    z-index: 2; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
    left: 15px; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.wrapper { 
 
    margin: 0 auto; 
 
    padding: 0 10px; 
 
    width: 1190px; 
 
}

<div id="container"> 
 
    <div class="wrapper"> 
 
    <h3>Heading Here</h3> 
 
    </div> 
 

 
    <div class="box"> 
 
    <div> 
 
     <a href="#"> 
 
     <img src="images/features-icon-1.png" alt=" "> 
 
     <p>Option 1</p> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#"> 
 
     <img src="images/features-icon-2.png" alt=" "> 
 
     <p>Option 2</p> 
 
     </a> 
 
    </div> 
 
    <div> 
 
     <a href="#"> 
 
     <img src="images/features-icon-3.png" alt=" "> 
 
     <p>Option 3</p> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="clear"></div> 
 
</div>