Выровнять текст по вертикали в 2 столбцах таблицы

У меня есть таблица с двумя столбцами, и на каждом столбце у меня есть другой размер шрифта (большой размер шрифта также сильно). Моя проблема заключается в вертикальное выравнивание текста: оно не совпадает по вертикали (см рисунок): Выровнять текст по вертикали в 2 столбцах таблицы

Вот мой HTML-код:

<html> 
<head> 
    <style> 
    .big-text-size { 
     font-size: 3.5em; 
    } 
    .small-text-size { 
     font-size: 1.1em; 
    } 
    </style> 
</head> 
<body> 
     <table> 
     <td class="big-text-size"> 
      <strong>My doctor's name</strong> 
     </td> 
     <td class="small-text-size"> Daniel Boro </td> 
     </table> 
</body> 
</html>

Любые предложения, почему это происходит?

источник

2015-10-27 Dror

Пожалуйста, сделайте ваш пример более минимальным: держите только те вещи, которые необходимы для воспроизведения проблемы. – petermeissner

Таблицы должна использоваться для табличных данных только - не макет – Pete

@petermeissner: Понял, удалить ненужный код – Dror

Tweak вертикальное выравнивание вашего различного размера-текста (see here):

<html> 
<head><style> 
    .big-text-size { 
     font-size: 3.5em; 
     vertical-align: text-bottom; 
    } 
    .small-text-size { 
    font-size: 1.1em; 
    vertical-align: text-bottom; 
    } 
</style></head> 
<body> 
     <table> 
     <td class="big-text-size"> 
      <strong>My doctor's name</strong> 
     </td> 
     <td class="small-text-size"> Daniel Boro </td> 
     </table> 
</body> 
</html>

источник

2015-10-27 10:04:39 petermeissner

Ваша вторая таблица не имеет ни одной строки ...

<table> 
    <tr> <!-- Missing --> 
     <td class="small-text-size">Daniel Boro</td> 
     <td class="big-text-size"><strong>My doctor's name</strong></td> 
    </tr> 
</table>

источник

2015-10-27 08:43:48

я вставил тега, как вы сказали, но это не изменило: по-прежнему выглядит так же – Dror

Можете ли вы сделать jsfiddle? –

попытка включая строки в таблице ..

вы также можете посетить этот сайт http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html Он обеспечивает 4 CSS трюков, которые вы можете использовать для выравнивания текста по вертикали в ячейке таблицы

источник

2015-10-27 08:46:14 Tanah

Выровнять текст по вертикали в 2 столбцах таблицы

ответ

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