vertical-algin: 段落垂直对齐设置值:sub(垂直对齐文本的下标。) super(垂直对齐文本的上标) top(上) middle(中) bottom(下) 10px -10px 相对于元素行高属性的百分比
letter-spacing: 字母的间距
word_spacing: 单词的间距
line-height: 文本行高
text-indent: 缩进方式
white-space: 排版方式设置值:normal (默认,空白会被忽略) pre(原样显示) nowrap(文本不会换行)
两种方式:
1:通过p标签,配合padding属性设置进行控制:
<p style="display:blockheight:5pxpadding:0px 10px">任意写一段文字www.jingshuiqi.link</p>2:通过line-height标签进行控制(优选):
<p style="line-height:30px;">任意写一段文字</p>以上以内联样式举例,字体方面使用font-size属性控制字体大小,可以多测试几次。
当一行文本,必须是一行在一个<div></div>块内部显示时,将该<div></div>块的行高设置为这个块本身的高度,就可以让内部的一行文本垂直居中。
相应的CSS代码如下:
div{
width:1000pxheight:30px
background-color:#ff5857//该属性为背景颜色,主要是让我们能够看到块本身
line-height:30px
}
line-height 属性的取值和 height 属性的取值是相同的,这样内部的一行文本就实现垂直居中。
在CSS中,line-height 属性的调整就是以这条线为标准线的。换句话说,当line-height属性设置为一定的数值时,段落中任意两行的行距就是这两行基线之间的距离。
扩展资料
利用精灵元素实现垂直居中的代码
代码如下:
ghost-center {
position: relative
}
.ghost-center::before {
content: " "
display: inline-block
height: 100%
width: 1%
vertical-align: middle
}
.ghost-center p {
display: inline-block
vertical-align: middle
width: 20rem
}