How do I centre a
in the middle of a container?

Question

I am trying to create a cart page for an eCommerce site and I want all the items in the cart to be shown in a table format. This is how I am going to present it:

I want the name, quantity and price of the product row to be in the middle of the container and I have tried to do this using align-content but it doesn't seem to work:

This is the html what is wrong?

.productRowContainer {
  /* holds the products added from the cart */
  width: 100%;
  height: 196px;
}

.cartItemContainer {
  width: 25%;
  float: left;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataContainer {
  width: 100%;
  height: 22px;
}

<!-- Product Row (will be repeated) -->
<div class="productRowContainer">
  <!-- holds labels for cart -->
  <div class="cartItemContainer">
    <img src="{{ asset('img/iamlush/shop/ShopDark.jpg') }}" style="width: 60%;">
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Name</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Quantity</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Price</p>
    </div>
  </div>
</div>

1

For tabular data, use a ``!
– connexo Jun 21 '20 at 07:54

score 2 · Accepted Answer · answered Jun 21 '20 at 08:02

The align-items property needs to be set on the productRowContainer. You also forgot display: flex on the container.

In the future, I recommend using http://flexbox.buildwithreact.com/ to play around with flexbox layouts. It really helps !

.productRowContainer {
  /* holds the products added from the cart */
  display: flex;
  width: 100%;
  height: 196px;
  align-items: center;
}

.cartItemContainer {
  width: 25%;
  float: left;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataContainer {
  width: 100%;
}

<!-- Product Row (will be repeated) -->
<div class="productRowContainer">
  <!-- holds labels for cart -->
  <div class="cartItemContainer">
    <img src="https://via.placeholder.com/196" style="width: 60%;">
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Name</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Quantity</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Price</p>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jun 21 '20 at 08:00

Add height: 100%; to .cartItemContainer and it shall align to middle.

.cartItemContainer {
      width: 25%;
      height: 100%; /* Add this line */
...

.productRowContainer {
  /* holds the products added from the cart */
  width: 100%;
  height: 196px;
}

.cartItemContainer {
  width: 25%;
  height: 100%; /* Add this line */
  float: left;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataContainer {
  width: 100%;
  height: 22px;
}

<!-- Product Row (will be repeated) -->
<div class="productRowContainer">
  <!-- holds labels for cart -->
  <div class="cartItemContainer">
    <img src="{{ asset('img/iamlush/shop/ShopDark.jpg') }}" style="width: 60%; height: 196px;">
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Name</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Quantity</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Price</p>
    </div>
  </div>
</div>

How do I centre a in the middle of a container?

2 Answers2

How do I centre a
in the middle of a container?