垂直对齐文本
问题描述:
我不能竖直对齐我的页脚内的一段文字与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
答
使用在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>
+0
表示完美!谢谢! –
+0
所以请接受答案吧,帮助别人也 –
+0
我做了,谢谢! –
请加上小提琴。因为图像被破坏。所以不能得到确切的看法。 :( – CodeRomeos
对不起,我添加了一个jsfiddle http://jsfiddle.net/vuy2vbq5/ –
对不起,我找不到任何问题!!你想它看起来像吗?? – CodeRomeos