html - 文本卡在 Div 底部

Question

编辑:谢谢大家，我已经解决了 - 这比您的建议简单得多。只需要将文本移动到“ map ”div(而不是“flex-container”div)中，并将文本放在正下方。感谢您的帮助，它让我想通了这个问题!

所以在我网站的底部，我有一个包含 Google map 的 div 部分，它下面应该是说明电子邮件地址和实际地址(公司的)的文本。

不幸的是，该文本被随机推到底部，如本网站的最底部所示:

http://website.sme.sh.s3-website-eu-west-1.amazonaws.com

下面是我认为影响它的代码-

.page {
    display: inline-block;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    width: 100vw;
    text-align: center;
    margin: auto;
}

.flex-container {
    height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.map {
    width: 60%;
    height: 50%;
    min-width: 20em;
}

<div class="page get-in-touch">
        <div class="flex-container">
            <div class="map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.2326378518164!2d-0.08973764855540126!3d51.52729277953841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761ca5df3ab397%3A0xb76b90b168bccd4d!2sSmesh!5e0!3m2!1sen!2suk!4v1528291922909" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>  
    <a href="mailto:hello@sme.sh" style="color: #000;"><u>hello@sme.sh</u></a> <a style="color: #000;"> | 20 East Road, London, N1 6AD</a>
</div>

我的代码中是否遗漏了什么？

Answer 1

这是由于您的 <a href="mailto:"></a>标记和您的地址标记在 flex-container 之外类(class)。

要修复，请将两个 <a> flex-container 内的标签上课并按您喜欢的方式放置它们。

或者，减少 height你的flex-container类