Вертикальное выравнивание

text

text
text

text

/* Общие стили */ * { box-sizing: border-box; } body { font-family: Arial, sans-serif; padding: 20px; background: #fafafa; } /* Способ 1 (рекомендуемый): Flexbox на .row */ .row { display: flex; /* делает колонки флекс-элементами */ align-items: center; /* вертикально выравнивает содержимое колонок по центру */ gap: 16px; border: 1px solid #e0e0e0; padding: 12px; min-height: 120px; /* для демонстрации высоты строки */ background: #fff; } .col-4 { flex: 1; padding: 8px; border: 1px dashed #d0d0d0; /* Если нужно дополнительно центрировать текст внутри колонки: */ display: flex; align-items: center; /* вертикальное центрирование внутри колонки */ justify-content: center; /* горизонтальное центрирование (удалите или измените при необходимости) */ text-align: center; min-height: 60px; } /* Примеры альтернатив: - Для выравнивания по базовой линии используйте .row { align-items: baseline; } - Старый вариант через table-cell: .row-table { display: table; width: 100%; } .row-table .col-4 { display: table-cell; vertical-align: middle; } */