CSS实现文本两端对齐的方法
最编程
2024-01-19 13:26:50
...
text-align:start | end | left | right | center | justify | match-parent | justify-all
justify:
内容两端对齐,但对于强制打断的行(被打断的这一行)及最后一行(包括仅有一行文本的情况,因为它既是第一行也是最后一行)不做处理。
start:
内容对齐开始边界。
end:
内容对齐结束边界。
match-parent:
这个值和 inherit 表现一致,只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的,计算值可以是 left 和 right 。
justify-all:
效果等同于 justify,但还会让最后一行也两端对齐。
在上一节css text-align-las设置末尾文本对齐方式我们就对"text-align:justify"做了讲解,但是正如上面的解释所说,它对最后一行以及本身就是第一行就不做处理,如下。
<style>
body,div{
margin:0;
padding:0;
}
div{
width:300px;
text-align:justify;
}
</style>
<div>让我们一起共勉,互相支持,让我们跑得更快,跑得更好吧!哪怕路上有风雨,哪怕途中有坎坷,只要不放弃奔跑,不放弃对自我的修行,我们终究会创造属于自己的生命奇迹!</div>
解决方法:
<style>
body,div{
margin:0;
padding:0;
}
div{
width:300px;
text-align:justify;
}
div::after{
content:'';
display:inline-block;
width:100%;
visibility:hidden;
}
</style>
<div>让我们一起共勉,互相支持,让我们跑得更快,跑得更好吧!哪怕路上有风雨,哪怕途中有坎坷,只要不放弃奔跑,不放弃对自我的修行,我们终究会创造属于自己的生命奇迹!</div>
它说最后一行不起效果,我们让它不是最后一行不就解决了。
还有一种方法就是用text-align-last
。
<style>
body,div{
margin:0;
padding:0;
}
div{
width:300px;
text-align:justify;
text-align-last:justify;
}
</style>
另外justify-all
也可以但Chrome不支持...还有其他几个属性,很好理解就不再讲解了。
推荐阅读
-
[姿势估计] 实践记录:使用 Dlib 和 mediapipe 进行人脸姿势估计 - 本文重点介绍方法 2):方法 1:基于深度学习的方法:。 基于深度学习的方法:基于深度学习的方法利用深度学习模型,如卷积神经网络(CNN)或递归神经网络(RNN),直接从人脸图像中学习姿势估计。这些方法能够学习更复杂的特征表征,并在大规模数据集上取得优异的性能。方法二:基于二维校准信息估计三维姿态信息(计算机视觉 PnP 问题)。 特征点定位:人脸姿态估计的第一步是通过特征点定位来检测和定位人脸的关键点,如眼睛、鼻子和嘴巴。这些关键点提供了人脸的局部结构信息,可用于后续的姿势估计。 旋转表示:常见的旋转表示方法包括欧拉角和旋转矩阵。欧拉角通过三个旋转角度(通常是俯仰、偏航和滚动)描述头部的旋转姿态。旋转矩阵是一个 3x3 矩阵,表示头部从一个坐标系到另一个坐标系的变换。 三维模型重建:根据特征点的定位结果,三维人脸模型可用于姿势估计。通过将人脸的二维图像映射到三维模型上,可以估算出人脸的旋转和平移信息。这就需要建立人脸的三维模型,然后通过优化方法将模型与特征点对齐,从而获得姿势估计结果。 特征点定位 特征点定位是用于检测人脸关键部位的五官基础部分,还有其他更多的特征点表示方法,大家可以参考我上一篇文章中介绍的特征点检测方案实践:人脸校正二次定位操作来解决人脸校正的问题,客户在检测关键点的代码上略有修改,坐标转换部分客户见上图 def get_face_info(image). img_copy = image.copy image.flags.writeable = False image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB) results = face_detection.process(image) # 在图像上绘制人脸检测注释。 image.flags.writeable = True image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR) box_info, facial = None, None if results.detections: for detection in results. for detection in results.detections: mp_drawing.Drawing.detection = 无 mp_drawing.draw_detection(image, detection) 面部 = detection.location_data.relative_keypoints 返回面部 在上述代码中,返回的数据是五官(6 个关键点的坐标),这是用 mediapipe 库实现的,下面我们可以尝试用另一个库:dlib 来实现。 使用 dlib 使用 Dlib 库在 Python 中实现人脸关键点检测的步骤如下: 确保已安装 Dlib 库,可使用以下命令: pip install dlib 导入必要的库: 加载 Dlib 的人脸检测器和关键点检测器模型: 读取图像并将其灰度化: 使用人脸检测器检测图像中的人脸: 对检测到的人脸进行遍历,并使用关键点检测器检测人脸关键点: 显示绘制了关键点的图像: 以下代码将参数 landmarks_part 添加到要返回的关键点坐标中。
-
在前端实现搜索和高亮文本的两种方法
-
用 CSS 实现瀑布流的两种方法
-
实现导航栏标签切换 CSS 的三种方法
-
垂直显示 CSS 文本的几种方法
-
通过 CSS 实现文本超出部分、超出两行、超出省略号部分的显示
-
使用纯 CSS 实现星级评定的三种方法
-
使用纯 CSS 实现星级评定的三种方法
-
CSS:实现颜色选择器透明度栏的两种方法(使用在线图像转换为 base64 网站)
-
2020年的CSS布局新方法:灵活实现多行四列及更多列数的网格设计