垂直對齊文本

我不能豎直對齊我的頁腳內的一段文字與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

表示完美！謝謝！ –

所以請接受答案吧，幫助別人也 –

我做了，謝謝！ –

垂直對齊文本

回答

相關問題