CSS怎么设置框架内文本的垂直位置
这篇文章将为大家详细讲解有关CSS怎么设置框架内文本的垂直位置，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
方法1：将框架样式更改为表格单元格并使用vertical-align属性
如果将框架样式更改为表格单元格，则可以使用vertical-align属性指定垂直位置。
在CSS中编写以下代码并设置垂直位置。
顶部对齐的示例
.TextVerticalTop{
display:table-cell;
vertical-align:top;
}
底部对齐的示例
.TextVerticalBottom{
display:table-cell;
vertical-align:bottom;
}
居中示例
.TextVerticalCenter{
display:table-cell;
vertical-align:middle;
}
方法2：使用position：relative按相对位置指定
如果position:relative指定样式，则可以在相对坐标中指定内部放置位置。
指定要在相对位置（例如“50％”）内显示的文本的位置。
顶部对齐的示例
span.top{
position:absolute;
top:0;
}
底部对齐的示例
span.bottom{
position:absolute;
bottom:0;
}
居中示例
span.center{
position:absolute;
top:50%;
margin-top:-0.5em;
}
代码示例：使用display：table-cell
代码如下：
TextAlignVerticalCell.html
<!DOCTYPEhtml><html><head>
<metacharset="utf-8"/>
<title></title>
<linkrel="stylesheet"href="TextAlignVerticalCell.css"/>
</head>
<body>
<divclass="TextVerticalTop">
顶部垂直对齐。</div>
<br/>
<divclass="TextVerticalBottom">
底部垂直对齐。</div>
<br/>
<divclass="TextVerticalCenter">
居中垂直对齐。</div>
</body>
</html>
TextAlignVerticalCell.css
.TextVerticalTop{
height:96px;
width:280px;
margin-top:24px;
margin-left:32px;
border:1pxsolid#009347;
display:table-cell;
vertical-align:top;
}
.TextVerticalBottom{
height:96px;
width:280px;
margin-top:24px;
margin-left:32px;
border:1pxsolid#009347;
display:table-cell;
vertical-align:bottom;
}
.TextVerticalCenter{
height:96px;
width:280px;
margin-top:24px;
margin-left:32px;
border:1pxsolid#009347;
display:table-cell;
vertical-align:middle;
}
说明：
display:table-cell将div标签作为表格单元格进行处理。在作为表格的单元格进行处理的情况下，为了有效地使用vertical-align属性，所以使用vertical-align设置内部文字的垂直位置。
display:table-cell通过设置，因为它不再是块元素，所以不在div标签的末尾处进行换行，因此使用了换行符<br/>标签。
关于“CSS怎么设置框架内文本的垂直位置”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
