在同一格中对齐文本的右边和中间

-1

可以在单个div中执行此操作吗？我试图让这个尽可能简单。在同一格中对齐文本的右边和中间

enter image description here

最重要的人认为是“是”，“否”和“2出2”需要为中心，无论文本量的左侧。

.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; 
 
}

<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>

来源

2015-06-10 Stefan

坦率地说，这看起来像禁忌大数据...为什么不使用表格？ –

这是一些疯狂的[标题元素]滥用（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements）。 – Oka

@Paulie_D我也在想这个，如果这是不可能的 – Stefan

尝试这样的：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>

来源

2015-06-10 11:38:21

这应该做体面的工作:) TY – Stefan

在同一格中对齐文本的右边和中间

回答

相关问题