对齐快速查看按钮 Horizontally/Vertically

Question

如何水平对齐快速查看按钮？

我已经尝试了下面的 css 但它不起作用。请指教。谢谢。

.woosq-btn {
    display: flex;
    justify-content: center;
}

我正在使用 WPC 智能快速查看插件。 Linkhttps://wordpress.org/plugins/woo-smart-quick-view/

更新 - 2021 年 5 月 3 日

使用@Ali Klein提供的CSS后，又触发了一个问题。所有产品均水平显示。

我通过添加 flex-wrap: wrap;

修复了它

ul.products {
  display: flex;
  flex-wrap: wrap;
}

li.product {
  display: flex;
  flex-direction: column;
}

li.product > a {
  flex: 1;
}

最终结果：

Answer 1

我采用的方法是在各个卡片上应用 display: flex; flex-direction: column，然后将除“快速查看”按钮之外的所有内容包装在容器中（它已经在容器中 a.woocommerce-loop-product__link )，然后给那个容器 flex: 1，这样它就可以垂直填满卡片的 space。

.container {
  display: flex;
}

.item {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 10px;
  background: lightblue;
}

.content {
  flex: 1;
}

.image {
  width: 100%;
  height: 200px;
  background-color: darkblue;
}

.description {
  padding: 10px;
}

.btn {
  margin: 10px;
}

<div class="container">
  <div class="item">
    <div class="content">
      <div class="image"></div>
      <p class="description">Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Vitae sapien pellentesque habitant morbi tristique. </p>
    </div>
    <button class="btn">
      Quick View
    </button>
  </div>
  <div class="item">
    <div class="content">
      <div class="image"></div>
      <p class="description">Sit amet nisl purus in mollis nunc sed id.</p>
    </div>
    <button class="btn">
      Quick View
    </button>
  </div>
  <div class="item">
    <div class="content">
      <div class="image"></div>
      <p class="description">Diam phasellus vestibulum lorem sed risus ultricies. Elementum integer enim neque volutpat.</p>
    </div>
    <button class="btn">
      Quick View
    </button>
  </div>
  <div class="item">
    <div class="content">
      <div class="image"></div>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua orci nulla pellentesque dignissim enim sit amet venenatis</p>
    </div>
    <button class="btn">
      Quick View
    </button>
  </div>
</div>

使用您的标记，css 看起来像：


ul.products {
  display: flex;
}

li.product {
  display: flex;
  flex-direction: column;
}

li.product > a {
  flex: 1;
}

您将得到以下结果：

对齐快速查看按钮 Horizontally/Vertically

Align Quick View Buttons Horizontally/Vertically

css

woocommerce

divi