Основа сетки c 3, html / css

Question

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

 -------------------------------------
|  Image  | The name of logo      | > |
 -------------------------------------

Я должен сделать это с помощью:

<div class="panel panel-default">
   <div class="card-header">
      <a class="card-link row" href="/webview/topup">
        <p style="font-size: 14sp; margin-bottom: 0">
          <img src="../images.png" th:src="@{../images/image.png}" width="10%" 
            height="10%" style="vertical-align: middle; font-family: 'Barlow', sans-serif;">
          The name of logo 
          <img src="../arrow.png" th:src="@{../arrow.png}" width="2%" height="2%"
           style="vertical-align: middle;" align="right";>
        </p>
      </a>
    </div>
  </div>

Но почему-то моя стрелка не отцентрирована, потому что он использует только выравнивание вправо. Как я могу сделать так, чтобы моя стрелка была выровненной вправо и по центру одновременно?

Извините, что задаю такие базовые c вопросы, потому что я вроде как новичок в html / css , Спасибо.

Answer 1

Это можно сделать с помощью css "grid" или "flex". Вы можете обратиться ко многим статьям, связанным с «css flex» и «css grid». Вы можете легко выравнивать элементы как по вертикали, так и по горизонтали. И есть много способов выровнять элементы внутри сетки. Это подойдет для вашего случая.

.grid {
  display: grid;
  height: 100px;
  background-color: #f9f9f9;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 20px;
}

<div class="grid">
  <div>Image</div> 
  <div>The name of logo</div>
  <div>></div>  
</div>

Answer 2

Для этого есть несколько способов.

Вы можете использовать flexbox на родительском элементе:

{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

и добавить:

{
  margin-left: auto;
}

к последнему дочернему элементу. , В вашем примере стрелка.

Хорошее визуальное введение / обзор flexbox доступен здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Конкретный пример этого с вашим кодом:

.card-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.arrow {
  margin-left: auto;
  width: 1em;
  height: 1em;
}

.logo {
  width: 2em;
  height: 2em;
}

img {
  width: 100%;
  height: auto
}

<div class="panel panel-default">
 <div class="card-header">
  <a class="card-link row" href="/webview/topup">
    <img class="logo" src="https://via.placeholder.com/150">
    <p class="text">The name of logo </p>
    <img class="arrow" src="https://via.placeholder.com/150">
   </a>
  </div>
</div>