我有一个页面(请参阅附件)vertical alignment
您可以看到右边的按钮与左边的按钮不对齐(由于上面的文本行较少)
如何使按钮下降并与左侧的按钮对齐? 我已经尝试过“ align-items,flex-end,display:bottom等”,但是我不懂编码。我不确定这是关于网格布局,还是可能需要在按钮周围包裹一下...
谢谢您的帮助!
.btn-add-to-cart {
margin: 0 auto;
}
<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
<div class="grid-product__wrapper">
<div class="grid-product__image-wrapper">
<a class="grid-product__image-link" href="{{ product.url | within: collection }}">
{% if product.featured_image.src == blank %}
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
{% else %}
<div class="reveal">
{% include 'image-style' with image: product.featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-bottom:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
src="{{ product.featured_image | img_url: '150x150' }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}">
<img class="hidden" src="{{ product.images.last | img_url: 'grande' }}" alt="{{ product.images.last.alt | escape }}" />
</div>
</div>
</div>
<noscript>
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</noscript>
{% endif %}
</a>
{% if sold_out %}
<div class="grid-product__sold-out">
<p>{{ 'products.product.sold_out_html' | t }}</p>
</div>
{% elsif on_sale %}
<div class="grid-product__on-sale">
{% capture discount_percentage %}{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price |round }}%{% endcapture %}
<p>{{ 'products.general.save_html' | t: saved_amount: discount_percentage }}</p>
</div>
{% endif %}
</div>
<a href="{{ product.url | within: collection }}" class="grid-product__meta">
<span class="grid-product__title">{{ product.title }}</span>
<span class="grid-product__price-wrap">
<span class="long-dash">—</span>
<span class="grid-product__price">
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>
{% if on_sale %}
<span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
</span>
</span>
{% if section.settings.product_vendor_enable %}
<p class="grid-product__vendor">{{ product.vendor }}</p>
{% endif %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Add to bag" class="btn btn-add-to-cart" />
<input type="hidden" name="return_to" value="back" />
</form>
</a>
</div>
</div>
CSS:
enter code here.btn-add-to-cart {
margin: 0 auto;
}