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"/>

<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怎么设置框架内文本的垂直位置

关于“CSS怎么设置框架内文本的垂直位置”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

网站标题：CSS怎么设置框架内文本的垂直位置
标题路径：https://www.cdcxhl.com/article6/gdpeig.html

成都网站建设公司_创新互联，为您提供软件开发、网站设计、响应式网站、品牌网站设计、静态网站、电子商务

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容