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

Question

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

嗨，我正在自定义我的测试站点（WP+店面+书店子主题），我得到了漂亮的顶部栏，真正的顶部栏，带有 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;
}

这里是带有包含 SPANS 的 DIV 的 HTML

<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>宽度设为 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}