CODEWITHSUNDEEP
reactjs
d-dripz
d-dripz

Reputation: 85

Align items centrally in a div

Goal: Align items centrally in div

See picture here (notice every watch is shifted to the left):

enter image description here

I'm trying to render each item in productcard centrally.

Currenty, each productCard__container renders to left.

Here is my ProductCard.js code:

return (
    <div className="productcard">
      <button onClick={(e) => history.push(`/product/${id}`)}>
        <div className="productCard__container">
          <img src={image} />
          <h1>{brand}</h1>
          <h2>{name}</h2>
          <p>${price}</p>
        </div>
      </button>
    </div>

...and the CSS code:

.productcard {
  margin: 10px;
  border-radius: 12px;
  background-color: black;
}

.productCard__container {
  align-items: center;
}

Upvotes: 1

Views: 27

Answers (1)

Rajdeep D
Rajdeep D

Reputation: 3900

You can use css flex box

.productcard {
   display: flex;
   justify-content: center;
}

Upvotes: 3

Related Questions