将文本右对齐并居中于同一div中

Question

在单个div中执行此操作是否可行？我试图让这变得尽可能简单。

最重要的想法是＆＃34;是＆＃34;，＆＃34;否＆＃34;和＆＃34; 2中的2＆＃34;无论左侧的文字数量多少，都需要居中。

＆＃13;

＆＃13;

.compliance {
  width: 100%;
  background-color: #f2f2f2;
  margin-bottom: 10px;
  padding: 10px;
  text-align: left;
  }
.compliance h5 {
  display: inline-block;
}
.compliance h5:last-child {
  width: 100px;
  margin: 0 auto;
  text-align: center;
  display: block;
}

＆＃13;

<div>
  <div class="compliance">
    <h5>Breaches</h5>
    <h5>(2014-FY)</h5>
    <h5>No</h5>
  </div>
  <div class="compliance">
    <h5>Cortex test successuful</h5>
    <h5>(2014-FY)</h5>
    <h5>Yes</h5>
  </div>
  <div class="compliance">
    <h5>Training as Nov 15</h5>
    <h5>(2014-FY)</h5>
    <h5>2 out of 2</h5>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请尝试以下操作： Demo

.compliance {
    background-color: #f2f2f2;
    margin-bottom: 10px;
    padding: 10px;
    text-align: left;
}
.compliance span {
    display: inline-block;
    font-weight:bold;
    width:auto;
    float:left;
}
.compliance span+span {
    padding:0 5px;
    font-weight:normal;
    display: inline;
}
.compliance span:last-child {
    width:30%;
    text-align: center;
    display: inline-block;
    float:right;
}
.cf:before, .cf:after {
    content:" ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

<强> HTML：

 <div class="compliance cf"> <span>Cortex test successuful</span>
   <span>(2014-FY)</span>  <span>Yes</span>
 </div>