css - 无法让店面顶部标题元素响应(垂直)对齐

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

这里是带有包含 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}