垂直对齐文本

Question

我无法将页脚中的一段文本与 vertical-align 正确垂直对齐，我不知道自己做错了什么，我将文本放在名为 [=13= 的容器中] 但这并没有解决任何问题。

HTML

<footer>
    <div class="vertical-text">
    <p>Text that i want to align</p>
    </div>
    <div id="social-img-wrap">
        <h5>Stay connected</h5> 
        <a href=""><img src="img/fb.png" /></a>
        <a href=""><img src="img/gplus.png" /></a>
        <a href=""><img src="img/tw.png" /></a>
    </div>           
</footer>

CSS

footer {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    background-color:white;
    width:100%;
    position:absolute;
    bottom: 0;
    height:auto;
    box-shadow: 0px 5px 29px black;
}

footer p {
    font-size:12px;
    padding-right:10px;
}


footer .vertical-text p {
    vertical-align:middle;
}

提前致谢！

编辑：JSFIDDLE

Answer 1

在footer中使用align-items: center;且无需提及vertical-align属性

footer {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    background-color:white;
    width:100%;
    position:absolute;
    bottom: 0;
    height:auto;
      align-items: center;
    box-shadow: 0px 5px 29px black;
}

footer p {
    font-size:12px;
    padding-right:10px;
}

<footer>
    <div class="vertical-text">
    <p>Made by @EduardValentin</p>
    </div>
    <div id="social-img-wrap">
        <h5>Stay connected</h5> 
        <a href=""><img src="img/fb.png" /></a>
        <a href=""><img src="img/gplus.png" /></a>
        <a href=""><img src="img/tw.png" /></a>
    </div>           
</footer>

垂直对齐文本

Vertical align text

html

css

text

alignment