css怎么设置两个字和三个字对齐

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以使用text-align属性来让两个字和三个字对齐；只需要给文本元素设置“text-align: justify;”样式即可，该样式可以实现文本两端对齐效果，让三个字和两个字对齐。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css两个字和三个字对齐

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

 

    <style>

        p{

            width: 70px;

            height: 40px;

            line-height: 40px;

            background: paleturquoise;

            text-align: justify;

        }

        p > span {

            display: inline-block /* Opera */;

            padding-left: 100%;

        }

    </style>

</head>

<body>

    <p>你好<span></span></p>

    <p>大家好<span></span></p>

    <p>同学们好<span></span></p>

</body>

</html>

效果图：

1.png

说明：

在CSS中，text-align 有一个属性值为 justify ，为对齐之意。其实现的效果就是可以让一行文字两端对齐显示（文字内容要超过一行）。

但是光使用它依然没什么卵用…..

要使文字两端对齐，我们还得使用一个行内空标签来助阵，比如 <span> 、 <i> 等等，这里是我用 <i> 标签

推荐教程：CSS视频教程 、html视频教程

以上就是css怎么设置两个字和三个字对齐的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

css是用来做什么的?

css中颜色有几种表达方式

css flex 的用途详解

如何使用css对td中input的宽度设置

html和css实现字体加粗的三种方法

如何在文字下面添加下划线

外部调用css不显示怎么办

css怎么去掉输入框的边框

css如何让图片和文字垂直居中对齐

css如何让img垂直居中

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...