在同一格中對齊文本的右邊和中間

-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

在同一格中對齊文本的右邊和中間

回答

相關問題