CODEWITHSUNDEEP
htmlcss
myfunnyfella
myfunnyfella

Reputation: 1447

How to align image, text and button on one line with out tables

I'm trying to align a movie poster image, description text & add to cart button on the same line. The text needs to be centered aligned and not wrap around button or image. It should look like this.

enter image description here

However, with my current code, it looks like this. Movie description text is not center-aligned and it wraps around the button. enter image description here

This is my code. How can I modify it to fix it to look like the first image?

    <div class="card-block">
        <div class="pull-left"><img src="https://{{movie.image}}" alt="[Image Missing]" width="70px" /></div>
        <br><span>{{movie.description}}</span>
        <span>
            <button class="float-right btn btn-sm btn-success" (click)="addToCart(movie)">
                Add to Cart
            </button></span>
    </div>

Upvotes: 0

Views: 3801

Answers (2)

Javier Miz Arevalo
Javier Miz Arevalo

Reputation: 11

There are many ways to solve your problem.

You can use flex

 .container {
      display: flex;
      align-items: center;
     }
     
.container .item:nth-child(2){ /*Only second item padding and center text*/
  padding-left: 1em;
  padding-right: 1em;
  text-align: center;
}
    <div class="container">
      <div class="item">
          <img src="https://via.placeholder.com/80x100">
      </div>
      <div class="item">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis sagittis enim. Nulla viverra aliquam.</p>
      </div>
      <div class="item">
          <button> Add to cart </button>
      </div>
    </div>

Or you can try with the new CSS-Grid, but it's not supported at all on some browsers yet

.container {
      display: grid;
      grid-template-columns: 1fr 4fr 1fr; /*Here you set how many columns will be and how much of the space they will take, for example there are 3 values, meaning 3 columns, the first and the last one will take 1 space of the row, and the second one will take 4 spaces*/
      align-items: center;
      grid-gap: 1em; /*The gap between items*/
    }
    
    .container .item:nth-child(2) {
       text-align: center;
    }
    <div class="container">
              <div class="item">
                  <img src="https://via.placeholder.com/80x100">
              </div>
              <div class="item">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis sagittis enim. Nulla viverra aliquam.</p>
              </div>
              <div class="item">
                  <button> Add to cart </button>
              </div>
            </div>

Upvotes: 1

Hai Pham
Hai Pham

Reputation: 2225

Try to use flex instead, this is example:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center
}
p {
  text-align:center
}
<div class="wrapper">
  <img src="https://via.placeholder.com/150" />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet est vel erat rutrum tempus. Etiam auctor dapibus magna, ut auctor metus pretium sed.
  </p>
  <button>
    Add
  </button>
</div>

Hope this help.

Upvotes: 0

Related Questions