Блог

Я пытаюсь создать простой веб-сайт, но мой разум не может понять размещение CSS встроенных и блочных элементов. Я пытаюсь разместить элемент anchor ( a ) в середине родительского div элемента , находясь на той же горизонтальной линии, что и изображение ( img ).
См., например, Ниже.

Я был бы признателен за любую оказанную помощь: это будет решение с объяснением или ресурсами для лучшего моего понимания.

Спасибо.

 <style>
 div {
    border: 1px solid black;
    margin: 1em;
  }
  h2 {
    text-align: center;
  }

  .info{
    display: flex;
    flex-flow: wrap column; 
    justify-content: space-between;
  }
  .links{
    border: none;
    text-align: center;
    align-self: center;
  }
</style>

<div class= info>
  <h2>Welcome</h2>
  <img src="IMAGE-SRC" alt="Picture" height=300px width=300px>
  <div class="links">
    <a href="">GitHub</a>
    <a href="">LinkedIn</a>
    <a href="">Instagram</a>
  </div>
</div>
 

Получение результата:

JSFiddle

    div
--------------------
|        h2        |
|                  |
|img               |
|        links     |
|       ....       |
--------------------
 

Желаемый результат:

    div
--------------------
|        h2        |
|                  |
|img    links      |
|                  |
|       ....       |
--------------------
 

В настоящее время ваш h2 файл содержится в поле flex и рассматривается как столбец. Его не следует заворачивать вместе с остальными элементами. Кроме того, подача flex-flow: no-wrap; заявки, похоже, работает нормально. без переноса означает отображение всех столбцов в одной строке.

 div {
    border: 1px solid black;
    margin: 1em;
  }
  h2 {
    text-align: center;
  }

  .info{
    display: flex;
    flex-flow: no-wrap;
    justify-content: space-between;
  }
  .links{
    flex: 1 1 0px;
    border: none;
    text-align: center;
    align-self: center;
  } 

 <div>
  <h2>Welcome</h2>
  
  <div class="info">
    <img style="flex: 1 1 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png" alt="Picture" height=300px width=300px>
    <div class="links">
      <a href="">GitHub</a>
      <a href="">LinkedIn</a>
      <a href="">Instagram</a>
    </div>
  </div>
   
</div>