CODEWITHSUNDEEP
htmlcssbootstrap-4
Audi Pratama
Audi Pratama

Reputation: 39

Basic 3 grid layout html/css

So basically I need to create a 3 grid layout which looks like:

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

I have somewhat do this with : 

<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>

But somehow my arrow is not centered because it only uses align right. How can I make my arrow to be align right and centered at the same time?

Im sorry to ask such basic questions, because Im kinda new to html/css. Thanks.

Upvotes: 0

Views: 59

Answers (2)

Janith Malshan
Janith Malshan

Reputation: 214

This can be done using css "grid" or "flex". You can refer to many articles related to 'css flex' and 'css grid'. You can easily align items in both vertical and horizontal. And there are many ways to align items inside a grid. This will be suitable for your case.

.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>

Upvotes: 1

Dan
Dan

Reputation: 917

There are multiple methods to achieve this.

You can use flexbox on the parent:

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

and add:

{
  margin-left: auto;
}

to the last child. In your example, the arrow.

A good visual introduction/overview of flexbox is available here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A concrete example of this with your code:

.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>

Upvotes: 1

Related Questions