Magento 2 – How to Center Related Products Block in Product Pages

designmagento2

On Blank theme, Related Products block is aligned to the left.

How can I align the block so the products are aligned at the center of the page?

I tried using "text-align: center" but this causes the product name and price are also aligned to center. Product name and price should stay aligned left.

enter image description here

Best Answer

The quick solution to the problem would be to use the working code of:

.related .column.main .product-items {
    text-align: center;
}

And then correct the alignment of the product name and price here:

.block.related .product-item-details {
    text-align: left;
}

These classes are based on the use of the Luma theme in a Magento 2 install.

I did notice that there are some responsive issues with this solution. Once you get down to a mobile view the products aren't centered because of some rouge margins. That can be easily cleaned up with some playing of the values.

Related Topic