Question

我无法正确地将我的页脚中的一段文本与vertical-align垂直对齐，我不知道我做错了什么，我将文本放在名为vertical-text的容器中但是没有修理任何东西。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

垂直对齐文本

1 个答案: