无法让店面顶部标题元素响应（垂直）对齐

Question

重要的是，该网站可能是 NSFW，一些电子书的封面可能是针对成人的（该网站是关于成人言情小说的）

嗨，我正在自定义我的测试站点（WP+storefront+bookshop 子主题），我得到了不错的顶部栏，真正的顶部栏有 2 个按钮和一个帮助链接。好的，通过一些 CSS，我可以使这些元素（具有 3 个包含按钮和链接文本的 SPANS 的 DIV）具有响应性。 如果您调整浏览器屏幕的大小，您会看到调整 BUI 大小的按钮和文本垂直增长，它们变得更高。

我想做这两件事中的一件；

1- 获取按钮内的文本以适应按钮宽度，使其不会增加高度，保持 2 个按钮的高度相同 2 或将 2 个按钮和文本垂直居中对齐，从大多数文本（每天获取.....）顶部、礼品卡中间、帮助文本底部。

这可能吗？

注意！！

我可以让按钮和文本帮助垂直对齐的唯一方法是使用此代码，但是在某些时候，当您调整屏幕大小时，它会“破坏”流畅/响应性并变得不对齐，然后，小屏幕看起来好的。通过将此元素与其他 2 个按钮对齐，我得到“一些”响应

<em>/*Align Help link*/
#help{
  display:inline-block;
    padding-left: 115px;
    padding-right: 115px;
}</em>

提前致谢

这里是 CSS

@media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 182px !important;
}
}

/*Remove title from Shop page*/
.woocommerce-products-header
{display: none;}

/*Hide Pages Tite with custom Class added to PHP snippets*/
.hidetitle .entry-header { 
display:none;
}

/*Make primary Pages full width*/
body.woocommerce #primary {
    width: 100%;
}

/*Align Search Bar and make text pink*/
#woocommerce-product-search-field-0 {
    display:inline-block;
    width:100%;
    color: #fe00a1; 
    border: solid 1px #fe00a1; 
}

/*Edited Cart*/
#site-header-cart{
    padding-bottom:0px;
    width:15%;
}

/*Changed cart icon bag f\290 to to cart icon f\217 */
.site-header-cart .cart-contents:after,
.storefront-handheld-footer-bar ul li.cart > a:before {
content: "\f217";
}


/*Align Help link*/
/*#help{
  display:inline-block;
    padding-left: 115px;
    padding-right: 115px;
}

/*Align Gift card*/
/*#gift-cardl{
      margin:auto;
}*/

/*JoinAngel button style*/
.JoinAngel {
    width:auto;
    height: 35px;
    margin-top: 15px;

}
/*Center collague image*/
.collague_image {
display: block;
    margin-left: auto;
    margin-right: auto;
        width:100%;
}

/*Add top padding to rectangle*/
#rectangle {
    padding:17px;
}

/*Remove Storefront footer credit*/
.site-footer .site-info {
    display: none;
}

这里是 HTML，其中 DIV 包含 SPANS

<div class="flex-container" style="text-align:center">  
<span style="display:inline-block; width:30%;height:35px;background-color:white">
<a href="http://sitetest.wigigx.com/product/gift-card/" target="_blank">
<button id="gift-cardl" style="margin: 30 auto">Gift Card</button></a> 
</span>
<span style="display:inline-block; width:30%;height:35px;background-color:white">        
<a id="help" href="https://sitetest.wigigx.com/contact/" target="_blank" style="margin: 30 auto">Help</a>
</span>
<span  style="display:inline-block; width:30%;height:35px;background-color:white">
<a id="Subscribe" href="https://newsletter.naughtyangelpublishing.com/" target="_blank">
<button class="subscribe_newsletter_btn" style="margin: 30 auto">Get Daily Book Bargains</button></a>
</span>  
</div>

提前感谢您的任何想法

Answer 1

我可以给你一个建议。也许你可以通过滚动来做到这一点。

禁用 <span> 的内联样式并添加到您的 CSS 中

@media screen and (max-width: 768px) {
.flex-container span {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%!important;
    transition: transform 0.5s;
    position: relative;
    display: flex!important;
    justify-content:center;
    align-content:center;
}

.flex-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
}
.flex-container span {display:inline-block; width:30%; height:35px; background-color:white}

或者你可以这样做<span> width 100% 和像楼梯一样。

@media screen and (max-width: 768px) {
.flex-container span {
    width: 100%!important;
    position: relative;
    display: flex!important;
    justify-content:center;
    align-content:center;
}

.flex-container {
    display: flex;
    flex-direction:column
}
}
.flex-container span {display:inline-block; width:30%; height:35px; background-color:white}