css文本左右对齐如何实现首行缩进?

发布时间:2019-12-26编辑:脚本学堂
css实现文本左右对齐的方法,以及css首行缩进以及段落缩进的实现方法,分享几个css文字对齐并段落缩进的例子,学会如何用css样式表控制文字对齐效果。

一、css文本左右对齐并首行缩进

效果图:
文本左右对齐并首行缩进

html代码:
 

<p class="elegant">Our online order form allows you to order directly in the internet, saving your time and offering you convenience. Here’s how you do it.</p>
<p class="elegant">When you want to buy our commodities, please register first. After you create your account successfully, you can directly order our products and pay for them. Next time you just click “log in”, you can enter your account, then shopping simply and conveniently.</p>

css样式代码:
 

<style type="text/css">
*.elegant
{
margin-left: 40px;
margin-right: 80px;
letter-spacing: 1px;
word-spacing: 2px;
line-height: 1.7em;
text-indent: 40px;
text-align: justify;
}
</style>

以上css样式实现了文本的左右对齐,并且段落首行缩进。

二、css文字对齐并段落缩进

css段落及图象的对齐和加入段落缩进。

1、文字对齐

利用文字对齐属性,你可以控制段落的水平 对齐:
 

H4 { text-align: center }

这项属性只用于整块的内容,如<P>、 <H1> -<H6>、<BLOCKQUOTE>和 <UL>。

以下为各种选项:
1、left指将要素左对齐,如本段所示。
2、center指将要素居中,如本段所示。
3、justify指将要素左右对齐,如本段所示。

三、用css样式表控制文字对齐效果

页面内容的对齐方式分水平(align)和垂直(vertical-align),在 CSS 样式表中,要使文字实现水平对齐和垂直对齐,则使用“text-align”和“vertical-align”。

水平对齐 text-align 的定义和用法
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。
通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;
不同用户代理可能会得到不同的结果。

默认值:如果 direction 属性是 ltr,则默认值是 left;如果 direction 是 rtl,则为 right。
继承性:是
版本:css
javascript 语法:object.style.textalign="right"

属性值 描述
 

left 把文本排列到左边。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值(IE不支持该属性)。

例子:
 

h1 { text-align:center; }


水平两端对齐 text-justify 属性
值 justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。不过在 CSS 中,还需要多做些考虑,因为该水平对齐属性会带来自己的一些问题,将在另一篇文章《css样式表文字两端对齐属性 text-justify 的用法》中对它进行详细讲解。

垂直对齐 vertical-align 的定义和用法
vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。
表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
默认值:baseline
继承性:no
版本:css1
javascript 语法:object.style.verticalalign="bottom"

属性值 描述
 

baseline 默认。元素放置在父元素的基线上。
sub  垂直对齐文本的下标。
super 垂直对齐文本的上标
top  把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

例子:
 

img { vertical-align:text-top; }

css实现段落首行缩进: