css如何控制文字垂直居底
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css如何控制文字垂直居底相关的知识，希望对你有一定的参考价值。
css如何控制文字垂直居背景图底不能用padding margin之类的
你说的文字居于底部是指浏览器底部么，如果是的话，需要用到CSS属性position，而position: fixed就是相对于浏览器进行定位的，让后用left, right, bottom, top这些坐标值来进行指定位置，底部就是bottom: 0，所以让文字垂直居底就像下面这个例子一样：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#footer
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
</style>
</head>
<body>
<div id="footer">垂直居于底部的文字</div>
</body>
</html>
这个例子里还假设你是除了需要垂直居底以外，还需要居中设置，因此那个width:100%和text-align: center就是为了居中放置的，这种设置经常用在一个网站用于声明版权、网站地图这些，多看几个这样的网站源代码就会发现，它们都是这么做的。
此外，还有一个position: absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置还是通过 "left", "top", "right" 以及 "bottom" 属性进行规定。你可以拿它来做到让某个元素处于一个区域比如某个div背景的底部，这时外面套的那个元素不能用默认的positon设定，需改成position: relative。例如：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container
position: relative;
width: 400px;
height: 300px;
margin: 20px auto;
background-color: #de5;
#innerFooter
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
</style>
</head>
<body>
<div id="container">
<div id="innerFooter">始终垂直居于块元素底部的文字</div>
</div>
</body>
</html> 参考技术A 在你的文字最外层的样式表里加上 writing-mode:tb-rl;文字就可以竖排了。
有不明白的再问我。 参考技术B 在层内套入表格,然后用表格的valign="bottom" 属性使层的内容垂直居底.就像这样:
<div>
<table>
<tr>
<td valign="bottom" height="100">test</td>
</tr>
</table>
</div>
同理,如果想垂直居中可以这样写valign="middle" 参考技术C vertical-align:bottom; 参考技术D display:inline;
vertical-align:bottom;
以上是关于css如何控制文字垂直居底的主要内容，如果未能解决你的问题，请参考以下文章