text-align规定行内内容如何相对它的块父元素对齐。它并不控制块元素自己的对齐，只控制它的行内内容的对齐。
text-align：justify只对多行文本生效。并且text-align不会对文本的最后一行起作用，因此最后一行依旧左对齐。单行文本的段落不会实现效果，因为单行文本既是第一行，也是最后一行。
单行文本如何实现两端对齐呢？
解决方法是：添加一个inline-block元素（可以添加一个标签或利用伪元素），并设置宽度为100%，那么这个时候inline-block的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了.
1、添加一个span标签的代码及效果截图：
代码截图1.png
p::after{
content:'';
width:100px;
display:inline-block;
}
keywords : line-height, 垂直居中，单行文本两端对齐，inline-block，visibi...
text-align规定行内内容如何相对它的块父元素对齐。它并不控制块元素自己的对齐，只控制它的行内内容的对齐。t...
如何实现图中两行文字对齐呢？？？ 使用text-align:justify 让多行文字两端不对齐的对齐，但是单行字...
水平对齐+行高 【思路一】text-align + line-height实现单行文本水平垂直居中 水平+垂直对齐...
一、水平居中 1.text-align 值：left，right，center，justify（文本两端对齐） 对...
设置 :
在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名， 手机号码， 出生地。这样我们就要用到 text-ali...
在实际工作中，有的时候需要实现两行字数不同的文字实现左右对齐，比如姓名和联系方式。下面我们就来演示一下如何实现这种...
【想法】自定义TextView 【链接】blog.csdn.net/kikitious_du/article/de...
字体排版三要素： 字号、字距、字型 两端对齐vs分散对齐 纹理网站：图鱼网 设置形状格式—文本选项 口袋动画PA插...
本文标题：单行文本两端对齐
本文链接：https://www.haomeiwen.com/subject/yoshhctx.html
网友评论