如何在WooCommerce产品类别页面上水平对齐Gutenberg添加到购物车按钮?

huangapple go评论132阅读模式
英文:

How do I align Gutenberg add-to-cart buttons horizontally on a WooCommerce product category page?

问题

环境: 使用 Twenty Three 主题 FSE 和 WooCommerce,以及产品(Beta)Gutenberg 块来显示产品类别。我找不到可以水平对齐这些按钮的水平工具,因此我正在寻找一个 CSS 解决方案。更改文本长度不是一个选项,也不是最佳选择。

问题示例:

如何在WooCommerce产品类别页面上水平对齐Gutenberg添加到购物车按钮?

非常感谢任何帮助!

英文:

Environment: Using Twenty Three theme FSE & WooCommerce and the Products (Beta) Gutenberg block to display product categories. No horizontal tool exists to align these buttons horizontally that I can find so I'm looking for a css solution. Changing text length isn't an option and also not optimal.

Example of problem:

如何在WooCommerce产品类别页面上水平对齐Gutenberg添加到购物车按钮?

Any help would be greatly appreciated!

答案1

得分: 1

解决方案 1

在灰色正方形上使用 position: relative;,并在按钮上使用

position: absolute;
bottom: 0px;

解决方案 2

<small>(不太好看)</small>

在灰色正方形上使用

display: flex;
flex-direction: column;

并在按钮之前添加 &lt;span style=&quot;flex: 1;&quot;&gt;

英文:

Solution 1

Using position: relative; on the grey square and

position: absolute;
bottom: 0px;

on the buttons.

Solution 2

<small>(not so nice)</small>

Using

display: flex;
flex-direction: column;

on the grey square and putting &lt;span style=&quot;flex: 1;&quot;&gt; before the button.

huangapple
  • 本文由 发表于 2023年8月11日 03:40:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76878852.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定