0

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

3 Answers 3

0

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.

2
  • This approach worked in Blank theme. I'll mark it as the best answer since it is the easiest way to do it Commented Aug 13, 2016 at 0:07
  • glad it worked for ya!
    – circlesix
    Commented Aug 14, 2016 at 14:59
0

I'm finding it a bit dofficult to picture, but I think this article might help?

https://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div

See, it sounds like you want to center your and not the contents. See how you get on.

1
  • I've already tried those but dont work. I'll update my question to include images so I can explain better Commented Aug 11, 2016 at 21:33
0

You could try something like this.

#category-items {
    display: inline-block;
    width: 100%;
#category-items li {
    display: table-cell;
    padding: 5px;
    width: 16.666666667%;
    text-align: center;
    background: #f3dce7;
    border-right: 1px solid #fff;

<div style="width:100%;float:left">
<ul id="category-items">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>

You'll have to use text-align:left on your product names, probable an <h5> tag and you might have to wrap you price in a div box and give it also text-align:left. I think it already is in div with "price-box" class.

Anyhow, give it a try.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.