纯css没法实现，除非你的元素宽度完全写死，那样的话会有很多问题，还是用js来实现吧，我写的这个需要引入jquery
<div id="main"><p class="tocenterRight">哥哥</p>
<p class="tocenterRight">你哥哥</p>
<p class="tocenterRight">你的大哥哥</p>
</div>
<script src="jquery-3.2.1.min.js" type="application/javascript"></script>
<script>
$(document).ready(function(){
//传入type参数center-right 或者left-right 可以传入以后看下效果，第二个参数是要做对其的类名，自己测试一下。
textAlign("center-right",".tocenterRight")
})
var textAlign = function(type,classname){
var o = $(classname)
var maxwidth = 0
switch (type){
case "center-right" :
$(o).css("text-align","right")
if(o.length>0){
$(o).css("width",parseInt($($(o).parent()).width()/2))
}else{
console.log("找不到任何对象！")
}
break
case "left-right" :
$(o).css("text-align","right")
if(o.length>0){
for(var i=0i<o.lengthi++){
$(o[i]).css("display","inline")
maxwidth = parseInt($(o[i]).css("width"))>maxwidth ? parseInt($(o[i]).css("width")) : maxwidth
}
$(o).css("display","block")
$(o).css("width",maxwidth)
}else{
console.log("找不到任何对象！")
}
break
default :
break
}
}
</script>
两种对齐的效果看下图：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
扩展资料：
CSS的特点：
1、丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
3、多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
参考资料来源：百度百科-CSS
