css中怎么把字体上下局中

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,我们可以使用一些技巧来实现将字体上下局中,让文章、段落和代码更加美观。关于文章和段落,我们可以使用P标签,在代码中,我们可以使用PRE标签。**使用P标签对文章和段落进行上下局中**在CS

在CSS中,我们可以使用一些技巧来实现将字体上下局中,让文章、段落和代码更加美观。关于文章和段落,我们可以使用P标签,在代码中,我们可以使用PRE标签。
**使用P标签对文章和段落进行上下局中**
在CSS中,我们可以使用text-align来实现文本水平对齐。而要实现垂直对齐,就需要使用vertical-align属性:
css
p{
    font-size:16px;
    line-height:1.5em;
    text-align:justify;
    display:inline-block;
    vertical-align:middle;
    height:200px;
    width:90%;
} 

上面这段CSS代码可以让每个P标签在一个200px的高度的容器中上下局中。其中,我们给每个P标签添加了display:inline-block属性,将其转换为行内块元素,是为了让其可以垂直对齐。另外,我们设置了它的高度、宽度、行高和字体大小等属性。
**使用PRE标签对代码进行上下局中**
要实现代码的上下局中,我们可以使用vertical-align属性,和之前实现文章和段落的上下局中类似:
css
pre{
    font-size:16px;
    line-height:1.5em;
    display:inline-block;
    vertical-align:middle;
    max-height:200px;
    overflow:auto;
    width:90%;
} 

这里,我们同样将PRE标签转换为行内块元素,添加vertical-align属性和max-height属性来设置其高度,overflow属性来让超出高度的内容自动出现横向滚动条。
总之,当我们尝试将文章、段落和代码的字体实现上下局中时,可以使用P标签和PRE标签,并添加一些CSS属性来让页面呈现更加美观的效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么把字体上下局中

粉丝

0

关注

0

收藏

0

已有0次打赏