纯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>
两种对齐的效果看下图：
可以用“text-align:right”让文字靠右对齐。
1、新建html文档，在body标签中添加div标签，为div设置一个id，这里以“demo”为例：
2、在div标签中添加文字，然后为div标签设置宽高和边框，这时默认情况下文字靠右对齐：
3、为div添加“text-align:right”，其中“text-align”指的是文本对齐方式，“right”指的是靠右对齐，这时网页中文字将会靠右对齐：
不知道你遇到的问题是不是 float右对齐的问题:
在设置右对齐显示的时候，我们通常会遇到，右对齐的元素会换行，这样就会出现左右元素不在同一条线上，我们可以通过以下方式来解决这个问题：
第一种解决办法：把左右对换，比如把日期放在标题的前面，对调一下就好了。
第二种解决办法：给右边也加上FLOAT:RIGHT。
CSS float定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄.
Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
参考资料： http://www.studyofnet.com/news/7.html
希望以上的回答能够帮到你
![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
