Вертикально выровнен текст с базовой версией текста группой

Это макет, я хочу создатьВертикально выровнен текст с базовой версией текста группой

В сущности:

Слово total и номер 120 следует выровнять по вертикали в центре
Слова per month следует выровнять внизу, номер 120
Слово группа 120 и per month должны быть выровнены по правому краю (отсюда использования float:right в классе CSS «падающего контейнера»)

Я начал с этим CSS стилем display:table-cell. Он затронул точку 3. Однако точка 1 не достигнута. Вертикальное выравнивание не работает.

код Демо можно найти здесь на jsfiddle: http://jsfiddle.net/kongakong/151eprrk/

Это выглядит следующим образом:

Согласно так ответить (Vertically centering a div inside another div), я могу использовать flex для достижения центра выравнивания.

Это моя следующая попытка: http://jsfiddle.net/kongakong/151eprrk/4/

Но она по-прежнему не работает, как я ожидал:

Можно ли указать, что неправильно или отсутствует?

источник

2015-11-18 Anthony Kong

Вы были на правильном пути. Нужно всего несколько исправлений.

Нет необходимости в table-cell на внутренних участках. inline-block сделаю.
Нет необходимости в float при использовании раскладки таблицы.
Удалить ширину с .frequency.
Вы ищете vertical-align: baseline вместо bottom.

Обновлено Fiddle: http://jsfiddle.net/abhitalks/151eprrk/5/

Отрывок:

.incident-banner { 
 
    display: inline-table; 
 
    color: white; background: lightblue; 
 
    margin-top: 20px; width: 100%; height: 75px; 
 
} 
 
.text { display: table-cell; vertical-align: middle; padding: 10px 20px; } 
 
.incident-container { 
 
    display: table-cell; vertical-align: middle; text-align: right; 
 
    padding: 10px 20px; 
 
} 
 
.incident { display: inline-block; vertical-align: baseline; font-size: 40px; } 
 
.frequency { 
 
    display: inline-block; vertical-align: baseline; 
 
    font-size: 12px; 
 
}

<div class="incident-banner"> 
 
    <div class="text">Total</div> 
 
    <div class="incident-container"> 
 
     <div class="incident">120</div> 
 
     <div class="frequency">per month</div> 
 
    </div> 
 
</div>

источник

2015-11-18 07:35:23 Abhitalks

Попробуйте этот код для вашей проблемы -

JSbin Demo

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main { 
 
    background: red; 
 
    overflow: hidden; 
 
    padding: 20px; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 
.left span { 
 
    line-height: 40px; 
 
} 
 
.right strong { 
 
    font-size: 32px; 
 
} 
 
.right span { 
 
    font-size: 12px 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="main"> 
 
    <div class="left"> 
 
     <span>Total</span> 
 
    </div> 
 
    <div class="right"> 
 
     <strong>120</strong> 
 
     <span>per month</span> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2015-11-18 07:32:21 pankaj98

Fixed здесь Fiddle

Я просто добавил line-height собственности на .incident & padding-top собственности на .frequency

.incident-banner { 
 
    display: inline-table; 
 
    color: white; 
 
    background: lightblue; 
 
    margin-top: 20px; 
 
    width: 100%; 
 
    height: 75px; 
 
} 
 
.text { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px 20px; 
 
} 
 
.incident-container { 
 
    // display: flex; 
 
    display: table-cell; 
 
    float: right; 
 
    vertical-align: middle; 
 
} 
 
.incident { 
 
    display: table-cell; 
 
    // display: inline-block; 
 
    // align-self: center; 
 
    text-align: right; 
 
    vertical-align: middle; 
 
    font-size: 40px; 
 
    line-height: 75px; 
 
} 
 
.frequency { 
 
    display: table-cell; 
 
    //align-self: center; 
 
    width: 75px; 
 
    padding-right: 10px; 
 
    vertical-align: middle; 
 
    font-size: 12px; 
 
    padding-top: 10px; 
 
}

<div class="incident-banner"> 
 
    <div class="text">Total</div> 
 
    <div class="incident-container"> 
 
    <div class="incident">120</div> 
 
    <div class="frequency">per month</div> 
 
    </div> 
 
</div>

источник

2015-11-18 07:38:27

Вертикально выровнен текст с базовой версией текста группой

ответ

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