css文字居中之后第二行怎么靠左边

实现css文字居中后第二行文字左对齐的方式有良多,分歧的结构方式,有分歧的写法,下面介绍利用div结构实现结果 。


1新建一个HTML文件,定名为test.html 。


css文字居中之后第二行怎么靠左边

文章插图

2编写代码,利用div结构两行文字,并给每个div一个class,用于下面CSS样式的结构 。


css文字居中之后第二行怎么靠左边

文章插图

3运行代码,结果如下:


css文字居中之后第二行怎么靠左边

文章插图

4利用css对div进行结构 。 起首,给最外面的div一个固定宽度,并居中,为了便利测试,给div一个灰色布景 。


css文字居中之后第二行怎么靠左边

文章插图

5然后,将所有文字利用text-align:center进行居中,需要注重的是,每行文字的div必需利用width:100%进行宽度节制,铺满整个div才有可能进行对齐体例的设置 。

css文字居中之后第二行怎么靠左边

文章插图

6【css文字居中之后第二行怎么靠左边】最后,对第二行文字利用text-align:left零丁设置左对齐,实现想要的结果 。

css文字居中之后第二行怎么靠左边

文章插图

7运行代码,结果如下:
可见,实现了css文字居中后第二行文字左对齐的结果 。 关头之处是对第二行文字进行零丁设置,进行左对齐,就可以实现结果 。

css文字居中之后第二行怎么靠左边

文章插图


以上内容就是css文字居中之后第二行怎么靠左边的内容啦,希望对你有所帮助哦!

    推荐阅读