Как сделать параграфы ровно над картинками в одну линию?

Question

[niklazh]

итак, я абсолютный новичок, говорю сразу, дабы избежать подобных суждений в будущем.
Так вот, есть на странице 2 картинки:

в коде

<img class="servers_image" src="content/nm11.png">
<img class="servers_image" src="content/dont_know.png">

и мне надо сделать над ними 2 параграфа по середине картинки(скорее всего надо будет сидеть вымеривать вручную), параграфы есть

<p class="server-name">НМ</p>
<p class="server-name">???</p>

итак, добавил их сверху над картинками, собственно это видно, но надо сделать их в одну линию, НО display: inline-block делает следующее:

совсем уж не знаю что делать и в div-ы эти оборачивал, ничего не получается(не думаю что это сильно принципиально, но на всякий случай CSS для картинок и параграфов:

.server-name{
    display: inline-block;
    width: 10px;
    position: relative;
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
    position: relative;
    top: 25px;
    left: 85px;
}
.servers_image{
   height: 300px;
    width: 230px;
    border-radius: 35px;
    margin-bottom: 3em;
    margin-right: 50px;
}

Answer 1

[Сергей delphinpro]

<div class="servers">
  <p class="server-name">НМ</p>
  <p class="server-name">???</p>
  <img class="servers_image" src="content/nm11.png">
  <img class="servers_image" src="content/dont_know.png">
</div>

.servers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  row-gap: 3em;
}
.server-name{
    /* display: inline-block; */
    /* width: 10px; */
    /* position: relative; */
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
    /* position: relative; */
    /* top: 25px; */
    /* left: 85px; */
  text-align: center;
}
.servers_image{
   height: 300px;
   /* width: 230px; */
   border-radius: 35px;
   /* margin-bottom: 3em; */
   /* margin-right: 50px; */
}

Comments

[niklazh]

Спасибо! единственное я поправил размер, чтобы они были чуть ближе. Если вам не сложно - не могли бы вы сказать почему вы это добавили?

[Сергей delphinpro]

niklazh, что именно?

[niklazh]

Сергей delphinpro, в .servers{}

[Сергей delphinpro]

niklazh, там включается грид-раскладка и настраивается.
или я не понял вопроса..

[niklazh]

Сергей delphinpro, ну просто что это за настройка и почему именно она

[Сергей delphinpro]

niklazh,

это за настройка

https://yandex.ru/search/?text=css+grid&lr=216550&...