css 段落样式

html-css028

css 段落样式,第1张

text-align: 段落水平对齐设置值:center、right、left、justify(继承)

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

}