2015-06-10 3 views
-1

Возможно ли это сделать в одном div? Я пытаюсь сделать это максимально простым.Выровнять текст вправо и в центре в одном 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>

+3

Откровенно это выглядит Табу lar data ... почему бы не использовать таблицу? –

+3

Это какое-то безумное злоупотребление [заголовками элементов] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements). – Oka

+0

@Paulie_D Я тоже думал об этом, если это невозможно – Stefan

ответ

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

Это должно делать достойный труд :) TY – Stefan

Смежные вопросы