css - 水平/垂直对齐快速查看按钮

Question

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

我在下面尝试了css，但它不起作用。请指教。谢谢你。

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

我正在使用 WPC Smart Quick View 插件。链接https://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以填充卡片的空间垂直。

.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;
}

你最终会得到以下结果：