Как разместить формулу MathML по центру?

Формула, созданная с помощью MathML, по умолчанию является строчным элементом, что позволяет вставлять её посреди текста. Для отображения формулы по центру, к элементу <math> следует добавить атрибут display со значением block.

<math display="block"> <mi>sin</mi> <mn>2</mn> <mi>α</mi> <mo>=</mo> <mn>2</mn> <mi>sin</mi> <mi>α</mi> <mi>cos</mi> <mi>α</mi> </math>

Если нет возможности добавить атрибут display, то допустимо воспользоваться стилями. Для этого в CSS к селектору math применяем свойство display со значением block math.

math {
 display: block math; /* Выравниваем по центру */
}

Браузеры Firefox и Safari не поддерживают значение math для свойства display, поэтому специально для них добавим ещё одно свойство display со значением block, а также свойство text-align для выравнивания по центру.

math {
 display: block; /* Для Firefox и Safari */
 text-align: center; /* Выравниваем по центру */
 
 display: block math;
}

Таким образом, браузер Firefox проигнорирует значение math для display, а Chrome перепишет значение block на block math, поскольку оно идёт ниже.

Формулы MathML могут отображаться в двух вариантах: обычном и компактном.

Обычный вид Компактный вид
∑ n=1 ∞ 1 3 n ∑ n=1 ∞ 1 3 n

При компактном виде формула выглядит чуть меньше, чтобы размещаться посередине текста и не сильно раздвигать строку. За вид формулы отвечает свойство math-style. Значение compact делает формулу компактной, а normal обычной. Для отображения формулы не в компактном, а обычном виде, добавим к стилю свойство math-style со значением normal.

Окончательный стиль для отображения формулы по центру показан в примере 1.

Пример 1. Формула по центру

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Формула</title> <style> .formula { display: block; /* Для Firefox и Safari */ text-align: center; display: block math; /* Выравниваем по центру */ math-style: normal; /* Обычный вид */ } </style> </head> <body> <p>Формула двойного угла:</p> <math class="formula"> <mi>sin</mi> <mn>2</mn> <mi>α</mi> <mo>=</mo> <mn>2</mn> <mi>sin</mi> <mi>α</mi> <mi>cos</mi> <mi>α</mi> </math> </body> </html>
MathML