垂直对齐文本

我不能竖直对齐我的页脚内的一段文字与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

来源

2015-09-06 Eduard Valentin

请加上小提琴。因为图像被破坏。所以不能得到确切的看法。 :( – CodeRomeos

对不起，我添加了一个jsfiddle http://jsfiddle.net/vuy2vbq5/ –

对不起，我找不到任何问题！！你想它看起来像吗？？ – CodeRomeos

使用在footer &没有必要提及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>

来源

2015-09-06 19:38:38

表示完美！谢谢！ –

所以请接受答案吧，帮助别人也 –

我做了，谢谢！ –

垂直对齐文本

回答

相关问题