将向下滚动箭头与 WPBakery Visual Composer 中全屏 div 的底部中心对齐答案

【问题标题】：Align scroll down arrow to the bottom center of a full-screen div in WPBakery Visual Composer将向下滚动箭头与 WPBakery Visual Composer 中全屏 div 的底部中心对齐
【发布时间】：2019-04-24 11:14:40
【问题描述】：

我在 Visual Composer 中有一系列全屏 div，我希望每个 div 的底部都有一个箭头，指示用户他们应该滚动以获取更多内容。我尝试在包含图标的 div 上进行绝对定位，但没有成功。我所做的只是将图标移动几个像素到 th

<section class="l-section wpb_row height_full valign_center width_full with_img" id="home">
<div class="l-section-img loaded" data-img-width="1920" data-img-height="809">
</div>

<div class="l-section-h i-cf">
<div class="g-cols vc_row type_default valign_top">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="w-image align_center" id="mainlogo">
<div class="w-image-h"><img src="logo.png" class="attachment-full size-full">
</div>
</div>


<div class="ult-just-icon-wrapper">
<div class="align-icon" style="text-align:center;">

<a class="aio-tooltip" href="#whatis">
<div class="aio-icon none " style="display:inline-block;">

<i class="Defaults-chevron-down"></i>

</div>
</a>

</div></div></div></div></div></div></div>
</section>

现有的 CSS：

.aio-icon.none {
    display: inline-block;
}
.aio-tooltip {
    display: inline-block;
    width: auto;
    max-width: 100%;
}
.vc_column-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
}
.wpb_column {
    position: relative;
}
.vc_column_container {
    display: flex;
    flex-direction: column;
}
.vc_row {
    position: relative;
}
.l-section-h {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

图标本身就是Defaults-chevron-down。

您知道如何正确定位该图标吗？

【问题讨论】：

父级div 和position:absolute 上的相对位置并将其放置在您想要的位置，您是否尝试过，但没有成功？请分享您尝试过的 CSS
感谢您的帮助。我确实在页面中的所有父/子 div 上尝试了 position:relative 和 absolute，但没有运气。也许现有 css 中的某些东西会阻碍？我已经粘贴了 WPBakery 生成的现有 css。
.wpb_row { position: relative } .ult-just-icon-wrapper { position: absolute; bottom:0; margin:0 auto; } 试试这个或类似的东西。应该工作。
它不起作用，不幸的是:(

标签： css wordpress visual-composer wpbakery

【解决方案1】：

我也为此感到有些挣扎。但是有一个相当快速和肮脏的解决方法：

只需在全高行下方再放一行。将你的图标放在那里，并给这个元素一个上边距，即 -200px。

出于某种奇怪的原因，将图标放在全高行本身并将其绝对定位到底部的相当合乎逻辑的方法不受 WPB 生成的源的正确支持。

【讨论】：

【解决方案2】：

这周我遇到了这个问题。我解决它的方法是在该行/部分中添加图标（在我的情况下，是一个带有指向 .svg 的自定义链接的单个图像元素）并向其添加一个类。

当时该类的 CSS 是：

position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top:-30px;

（我添加了一个负边距顶部，因为我注意到我的 Google Pixel 手机上的图标被剪掉了一点，底部栏是固定的，所以它向上拉了一点。）

【讨论】：