CSS文本右对齐，同时仍保持左右相等的填充

Question

这可能看起来很简单，但到目前为止我遇到了很多麻烦，我基本上需要将p标签中的文本正确对齐，同时始终保持左右相等的填充，也是p标签的宽度需要是其容器的最大宽度的50％，这里是一些代码和一个基本的小提琴，说明问题http://jsfiddle.net/edmundoto/v9r7keh2/

<p> This text needs to be right aligned but always maintain equal padding left and right</p>

p {
   text-align: right;
   background-color:red;
   color:white;
   font-size:20px;
   max-width:50%;
   float:right;
}

Answer 1

我认为您可以通过使用text-align: justify和text-align-last: right;的组合来实现这一目标。

但是，由于text-align-last属性的浏览器支持不太好，您可以通过direction: rtl;声明伪造效果，如下所示：

<强> Example Here

p {
  text-align: justify; direction: rtl;

  max-width:50%;
  float:right;

  padding: 0 1em;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

当句子以direction: rtl;，.等结尾时，

注意＃1： ! may cause a trouble

注意＃2 box-sizing: border-box;使UA计算框的width / height，包括填充和边框。哪个应该适用于IE8及以上版本。

Answer 2

您可以使用此代码

HTML代码：

<div>
    <p class="middle">align center</p>
</div>

CSS代码：

p.middle{
    width:50%;
    margin:0 auto;
    text-align:right;
}

Answer 3

http://jsfiddle.net/v9r7keh2/3/

将其包装在父

中

div {
max-width:50%;
float:right;
}

p{
text-align: right;
background-color:red;
color:white;
font-size:20px;
padding:1em;
padding-right:10em;
}

Answer 4

我希望我解决了你的问题。我同时设置padding padding-right:50px和padding-left:50px，并根据您的要求保持正确。

<强> Live Working Demo

<强>结果：